列表自定義列實現 === ### 功能說明： ``` 頁面自定義設置列表需要選擇的列，設置組件集成的兩種方法，一個是在列表外增加設置組件，一個是在列表表頭增加設置組件 具體代碼案例參照【常用示例-單表模型示例】功能 ``` **功能預覽：**    ### 實現方法： #### 一. 增加初始化配置 ##### 1 . data() 方法中配置 ``` //表頭 columns:[], //列設置 settingColumns:[], //列定義 defColumns: [{ title: '#', dataIndex: '', key: 'rowIndex', width: 60, align: "center", customRender: function (t, r, index) { return parseInt(index) + 1; } }, { title: '姓名', align: "center", dataIndex: 'name' }, ....... ....... ] 說明： columns：列表展示的列，初始為空。 settingColumns：保存勾選的列設置 defColumns：定義列表可以展示的列信息 ``` ##### 2. 增加設置按鈕，兩種實現方式任選其一即可 （1）第一種在列表外增加設置按鈕 ``` <a-popover title="自定義列" trigger="click" placement="leftBottom"> <template slot="content"> <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns"> <a-row> <template v-for="(item,index) in defColumns"> <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'"> <a-col :span="12"><a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox></a-col> </template> </template> </a-row> </a-checkbox-group> </template> <a><a-icon type="setting" />自定義列</a> </a-popover> ``` （2）第二種在表頭列中擴展按鈕 在操作列定義中增加插槽設置 ``` { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { filterDropdown: 'filterDropdown', filterIcon: 'filterIcon', customRender: 'action'}, } ``` <a-table></a-table> 中增加插槽代碼 ``` <div slot="filterDropdown"> <a-card> <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns"> <a-row> <template v-for="(item,index) in defColumns"> <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'"> <a-col :span="12"><a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox></a-col> </template> </template> </a-row> </a-checkbox-group> </a-card> </div> <a-icon slot="filterIcon" type='setting' :style="{ fontSize:'16px',color: '#108ee9' }" /> ``` ##### 3. 實現checkbox @change ``` //列設置更改事件 onColSettingsChange (checkedValues) { var key = this.$route.name+":colsettings"; Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000) this.settingColumns = checkedValues; const cols = this.defColumns.filter(item => { if(item.key =='rowIndex'|| item.dataIndex=='action'){ return true } if (this.settingColumns.includes(item.dataIndex)) { return true } return false }) this.columns = cols; }, ``` #### 4. 頁面加載時實現列的初始化方法 ``` initColumns(){ //權限過濾（列權限控制時打開，修改第二個參數為授權碼前綴） //this.defColumns = colAuthFilter(this.defColumns,'testdemo:'); var key = this.$route.name+":colsettings"; let colSettings= Vue.ls.get(key); if(colSettings==null||colSettings==undefined){ let allSettingColumns = []; this.defColumns.forEach(function (item,i,array ) { allSettingColumns.push(item.dataIndex); }) this.settingColumns = allSettingColumns; this.columns = this.defColumns; }else{ this.settingColumns = colSettings; const cols = this.defColumns.filter(item => { if(item.key =='rowIndex'|| item.dataIndex=='action'){ return true; } if (colSettings.includes(item.dataIndex)) { return true; } return false; }) this.columns = cols; } } ``` created中調用： ``` created() { this.initColumns(); }, ```