极客观点
项目管理
HarmonyOS
问题描述
1、点击查看左边的复选框，全选这一列；其余的同理。
2、表头功能动态添加（根据后台的数据，动态添加表头，比如后台还有个导入功能，这个表单的表头也必须动态增加一列）
问题出现的环境背景及自己尝试过哪些方法
我使用的模板是element-ui提供的，表头是自定义表头，由于要动态的增加表头，所以我使用了循环遍历，这就导致了这三列的数据是冲突的：比如说点击查看，应该全选这一列，但是现在所有的复选框全部勾选了。
为了解决这个问题，我又使用二维数组来分别存储这些数据，让它们不冲突，但是现在点击表头的复选框，表格的复选框没反应了
相关代码
<el-table-column
prop="name"
label="模块名称">
</el-table-column>
<template v-for='(col) in fdata'>
<el-table-column
align="center"
width="150">
<template slot-scope="scope" slot="header">
<el-checkbox :indeterminate="isIndeterminate[col.id-1]" v-model="selectall[col.id-1]"
@change="( (val) => handleCheckAllChange(val,col.id-1))">
{{col.name}}
</el-checkbox>
</template>
<template slot-scope="scope">
<el-checkbox-group v-model="checkedCities[[col.id-1]]" @change="((value) => handleCheckedCitiesChange(value,col.id-1))">
<el-checkbox :label="scope.row.id" :key="scope.row.id"><span>{{scope.row.id}}</span></el-checkbox>
</el-checkbox-group>
</template>
</el-table-column>
export default {
data () {
return {
tableData: [],
form: {},
row: '',
fdata: [],
selectall: [],
isIndeterminate: [],
checkedCities: [[]],
multipleSelection: [[]],
id: [[]]
}
},
methods: {
handleCheckAllChange (val, index) {
console.log(val + '' + index)
this.selectall[index] = true
this.checkedCities[[index]] = val ? this.id[[index]] : []
this.isIndeterminate[index] = false
},
handleCheckedCitiesChange (value, index) {
console.log(value)
console.log(index)
let checkedCount = value.length
this.selectall[index] = checkedCount === this.id[[index]].length
this.isIndeterminate[index] = true
},
loop (item, index) {
if (item.children.length > 0) {
this.id[[index]].push(item.id)
for (let i in item.children) {
this.loop(item.children[i], index)
}
} else if (item.children.length === 0) {
this.id[[index]].push(item.id)
}
}}，created () {
let res = {
'data': {
'list': [
{
id: 1,
name: '订单',
children: [{
id: 2,
name: '订单发起',
children: [{
id: 3,
name: '订单处理',
children: []
}]
}]
}, {
id: 4,
name: '资金',
children: [{
id: 5,
name: '资金管理',
children: [{
id: 6,
name: '资金汇入汇出',
children: []
}]
}, {
id: 7,
name: '资金结算',
children: [{
id: 8,
name: '资金转结',
children: []
}]
}]
}, {
id: 9,
name: '商品',
children: [{
id: 10,
name: '日用品',
children: [{
id: 11,
name: '牙刷',
children: []
}]
}, {
id: 12,
name: '数码用品',
children: [{
id: 13,
name: '电脑',
children: []
}]
}]
}
],
'functionData': [
{id: 1, name: '查看'}, {id: 2, name: '编辑'}, {id: 3, name: '审批'}
]
}
}
// 初始化表单和表格数据
this.form = this.$route.params.row
this.tableData = res.data.list
// 初始化复选框表头数据
this.fdata = res.data.functionData
// 初始化复选框其他参数
for (let i = 0; i < this.fdata.length; i++) {
this.selectall[i] = false
this.isIndeterminate[i] = false
this.checkedCities[[i]] = []
}
// 将tree型菜单数据的id存入id数组
for (let i = 0; i < this.fdata.length; i++) {
this.id[[i]] = []
for (let j = 0; j < this.tableData.length; j++) {
if (this.tableData[j].children.length > 0) {
this.loop(this.tableData[j], i) // 递归方法
} else {
this.id[[i]].push(this.tableData[j].id)
}
}
this.multipleSelection[[i]] = this.id[[i]]
}
}
}
你期待的结果是什么？实际看到的错误信息又是什么？
各位有什么好的解决方案吗
终于解决了。
一个最大的问题就是script里面已经将每个数组的值都添加了，但是el标签就是监测不到变化，查看Vue的文档后发现，v-model不支持数组动态修改，说白了就是你如果直接使用数组如a[i]，那么vue的v-model是不会更新数组的数据的，必须得使用$set方法，才能将这些变化重新加入到vue的监测范围内，具体请查看https://cn.vuejs.org/v2/guide...