列表自定义列实现

列表自定义列实现 === ### 功能说明： ``` 页面自定义设置列表需要选择的列，设置组件集成的两种方法，一个是在列表外增加设置组件，一个是在列表表头增加设置组件 具体代码案例参照【常用示例-单表模型示例】功能 ``` **功能预览：**    ### 实现方法： #### 一. 增加初始化配置 ##### 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）第一种在列表外增加设置按钮 ``` 自定义列 ``` （2）第二种在表头列中扩展按钮 在操作列定义中增加插槽设置 ``` { title: '操作', dataIndex: 'action', align: "center", scopedSlots: { filterDropdown: 'filterDropdown', filterIcon: 'filterIcon', customRender: 'action'}, } ``` 中增加插槽代码 ``` ``` ##### 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(); }, ```