過濾出需要顯示的表格列 >[info] 顯示效果 第一步：  第二步：  >[info] 示例代碼 ``` <template> <div class="page-container"> <!--導航與工具欄--> <el-row justify="space-between" type="flex"> <el-col :span="14" class="top-bar"> <el-button @click="displayFilterColumnsDialog" icon="el-icon-ali-Filter" round></el-button> <!--表格顯示列界面--> <table-column-filter-dialog :columns="columns" @handleFilterColumns="handleFilterColumns" ref="tableColumnFilterDialog"></table-column-filter-dialog> </el-col> </el-row> </div> </template> <script> import tableColumnFilterDialog from '@/components/core/table_column_filter_dialog' export default { components: { tableColumnFilterDialog }, data () { return { columns: [], filterColumns: [] } }, methods: { // 處理表格列過濾顯示 handleFilterColumns (data) { this.columns = data.filterColumns }, // 處理表格列過濾顯示 initColumns () { this.columns = [ { prop: 'id', label: 'ID', minWidth: 60 }, { prop: 'username', label: '用戶名', minWidth: 100, showOverflowTooltip: true }, { prop: 'attachment.path', label: '頭像', minWidth: 80, propType: 'image', align: 'center' }, { prop: 'roleNames', label: '角色', minWidth: 210, showOverflowTooltip: true }, { prop: 'email', label: '郵箱', minWidth: 120, showOverflowTooltip: true }, { prop: 'mobile', label: '手機', minWidth: 100 }, { prop: 'state', label: '狀態', minWidth: 70, formatter: this.env.formatState, align: 'center' } ] this.filterColumns = Object.assign([], this.columns) } }, mounted () { this.initColumns() } } </script> ``` >[info] 屬性說明 columns：需要過濾的列數組 >[info] 事件說明 ``` handleFilterColumns：事件回調，參數：返回過濾結果 ```