diff --git a/jero-web/src/components/jero/JTable.vue b/jero-web/src/components/jero/JTable.vue index 24a7e36b..365c3532 100644 --- a/jero-web/src/components/jero/JTable.vue +++ b/jero-web/src/components/jero/JTable.vue @@ -29,8 +29,8 @@ - - {{ a.slots.title }} + + {{ column.slots.title }} @@ -40,10 +40,10 @@ @@ -128,15 +128,16 @@ export default { }, data() { return { + // 存储当前列表的用户存储信息 + key: "customer_cloumns_" + this.$route.path, // 内部使用的 slots ,不再处理 usedSlots: [], - needTotalList: [], selectedRows: [], selectedRowKeys: [], curTableColumns: this.columns, checkedList: [], - plainOptions: [], + plainOptions: [], //筛选显示的列头数组 radioStyle: { display: 'block', height: '30px', @@ -170,35 +171,53 @@ export default { scopedSlotsKeys() { return Object.keys(this.$scopedSlots).filter(key => !this.usedSlots.includes(key)) }, + // 需要插槽处理的列的信息 + columnsSlot() { + let a= this.curTableColumns.filter( + item => item.slots + ); + console.log(a) + return a + } }, mounted() { // 遍历出筛选列头的所有选项 this.columns.forEach((item) => { - let colItem = { - value: item.slots.title, - label: item.slots.title, - disabled: false, + if (item.slots && item.slots.title){ + let colItem = { + value: item.slots.title, + label: item.slots.title, + disabled: false, + } + this.plainOptions.push(colItem) } - this.plainOptions.push(colItem) }) // 读取localStorage中的数据 - var storageCloumns = JSON.parse(localStorage.getItem('pro__Cloumns')) + var storageCloumns = JSON.parse(localStorage.getItem(this.key)) // console.log(storageCloumns) if (storageCloumns) { this.curTableColumns = storageCloumns } // 遍历出筛选列头中的已选项 this.curTableColumns.forEach((item) => { - this.checkedList.push(item.slots.title) + if (item.slots && item.slots.title){ + this.checkedList.push(item.slots.title) + } else if (item.title) { + this.checkedList.push(item.title) + } }) + console.log(this.checkedList) }, created() { this.needTotalList = this.initTotalList(this.columns) + console.log(this.$route.path) + console.log(this.key) }, methods: { // 用户可自行筛选列头显示的字段 onChange(e) { + debugger // 只剩一个时候,最后一个多选按钮禁用 if (this.checkedList.length === 1) { this.plainOptions.forEach((item) => { @@ -218,7 +237,7 @@ export default { //转换为dataIndex for (let i = 0; i < e.length; i++) { this.columns.find((item) => { - if (item.slots.title === e[i]) { + if (item.slots && item.slots.title === e[i]) { trfList.push(item.dataIndex) } }) @@ -232,16 +251,15 @@ export default { if (diffList.length === 0) { // 如果数组为空,则把父组件传过来的表头赋值给 this.curTableColumns = this.columns - localStorage.setItem('pro__Cloumns', JSON.stringify(this.curTableColumns)) - return + localStorage.setItem(this.key, JSON.stringify(this.curTableColumns)) + } else { + let midColumns = this.columns + for (let i = 0; i < diffList.length; i++) { + midColumns = midColumns.filter((item) => item.dataIndex !== diffList[i]) + } + this.curTableColumns = midColumns + localStorage.setItem(this.key, JSON.stringify(this.curTableColumns)) } - let midColumns = this.columns - for (let i = 0; i < diffList.length; i++) { - midColumns = midColumns.filter((item) => item.dataIndex !== diffList[i]) - } - this.curTableColumns = midColumns - - localStorage.setItem('pro__Cloumns', JSON.stringify(this.curTableColumns)) }, // 比较两个数组之间的不同,生成新数组 getArrDifference(arr1, arr2) {