【修改】解决slots的传递bug
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user