# 显示隐藏列

显示隐藏列

在组件中需配置：属性columnSetting是否显示列设置按钮

name：属性是为了确定当前表格的唯一性（如果出现重复情况，可能造成显示隐藏列的数据错乱）

<template>
  <div class="t-table" style="width:100%;">
    <t-table columnSetting name="TtableColumnSet" title="显示隐藏列" :table="table" :columns="columns">
      <template #amount="{param}">{{param.row.amount|currencyFilter}}</template>
    </t-table>
  </div>
</template>

<script>
export default {
  name: 'TtableColumnSet',
  data () {
    return {
      table: {
        data: [
          {
            id: '1',
            date: '2019-09-25',
            name: '张三',
            status: '2',
            amount: 3000,
            address: '广东省广州市天河区'
          },
          {
            id: '2',
            date: '2019-09-26',
            name: '张三1',
            status: '2',
            amount: 2000,
            address: '广东省广州市天广东省广州市天河区2广东省广州市天河区2河区2'
          },
          {
            id: '3',
            date: '2019-09-27',
            name: '张三2',
            status: '3',
            amount: 4000,
            address: '广东省广州市天河区3'
          }
        ]
      },
      columns: [
        { prop: 'name', label: '姓名', minWidth: '100' },
        { prop: 'date', label: '日期', minWidth: '160' },
        { prop: 'address', label: '地址', minWidth: '220' },
        { prop: 'status', label: '状态', minWidth: '100', filters: { param: 'PROTOCOL_BUSS_TYPE' } },
        { prop: 'amount', label: '金额', minWidth: '160', slotName: 'amount' },
        { prop: 'address77', label: '地址77', minWidth: '220' },
        { prop: 'name1', label: '姓名1', minWidth: '100' },
        { prop: 'date22', label: '日期22', minWidth: '180' },
        { prop: 'address33', label: '地址33', minWidth: '220' },
        { prop: 'name44', label: '姓名44', minWidth: '100' },
        { prop: 'date55', label: '日期55', minWidth: '180' },
        { prop: 'address66', label: '地址66', minWidth: '220' }
      ]
    }
  }
}
</script>

← 复选框功能显示 table 外操作按钮 →