【修改】解决slots的传递bug

This commit is contained in:
zer0Black
2021-04-16 16:47:53 +08:00
parent 2c7a6f674b
commit 261b6ef336
+41 -23
View File
@@ -29,8 +29,8 @@
<slot :name="slotItem" v-bind="{record, index, indent, expanded}"></slot>
</template>
<span :slot="a.slots.title" v-for="a in curTableColumns" :key="a.dataIndex">
{{ a.slots.title }}
<span :slot="column.slots.title" v-for="column in columnsSlot" :key="column.dataIndex">
{{ column.slots.title }}
<a-dropdown :trigger="['click']">
<a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
<!-- 操作 -->
@@ -40,10 +40,10 @@
<a-sub-menu key="frozen" title="冻结列头">
<a-menu-item>
<a-radio-group
v-model="a.slots.fixedValue"
v-model="column.slots.fixedValue"
@change="
(e) => {
fixedChange(e, a.dataIndex)
fixedChange(e, column.dataIndex)
}
"
>
@@ -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) {