Element-uiЭто фреймворк пользовательского интерфейса, который широко используется в Китае.Его табличный компонент обеспечивает функции множественного выбора и данных дерева, но не обеспечивает функцию их объединения.Давайте сначала посмотрим на следующие изображения.Эта статья познакомит вас с следующие функции Как достичь и некоторые подводные камни.
В приведенном выше Gif, когда мы нажимаем флажок высокого уровня, флажок низкого уровня также будет установлен. При отмене он будет отменен вместе. Чтобы реализовать эту функцию, нам сначала нужно сосредоточиться на структуре данных, которую нужно отобразить.
tableData: [{
id: 1,
date: '2016-05-02',
name: '王小虎',
checked: false,
address: '上海市普陀区金沙江路 1518 弄'
}, {
id: 2,
date: '2016-05-04',
name: '王小虎',
checked: false,
address: '上海市普陀区金沙江路 1517 弄'
}, {
id: 3,
date: '2016-05-01',
name: '王小虎',
checked: false,
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 31,
date: '2016-05-01',
name: '王小虎',
checked: false,
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
checked: false,
address: '上海市普陀区金沙江路 1519 弄',
children: [{
id: 61,
date: '2016-05-01',
name: '王小虎',
checked: false,
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 62,
date: '2016-05-01',
name: '王小虎',
checked: false,
address: '广州市普陀区金沙江路 1519 弄'
}]
}]
}, {
id: 4,
date: '2016-05-03',
name: '王小虎',
checked: false,
address: '上海市普陀区金沙江路 1516 弄'
}]
Каждая строка данных для рендеринга имеет соответствующийchecked, через этот ключ можно привязать соответствующий чекбокс, некоторые данные имеютchildren, который находится в форме массива, который является поддеревом, которое нужно отобразить, и объекты в массиве также имеютcheckedсвойства, также может иметьchildrenАтрибуты(не обязательные),конечно,структура данных в реальной разработке не обязательно такая простая.В это время массив надо преобразовать,изменив структуру данных.Я лично считаю,что структура данных-это то,что должен делать отличный программист понять и научиться.
использоватьtemplateМы можем настроить содержимое, которое мы хотим, Мы можем привязать флажок каждой строки через проверку соответствующих данных, используяslot="header"Заголовок можно настроить, поэтому в итоге мы можем написать следующий код
<el-table-column align="center">
<template slot="header">
<el-checkbox v-model="checkedAll"
@change="handleCheckedAll"/>
</template>
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked"
@change="handleCheckedOne(scope.row)"/>
</template>
</el-table-column>
checkedAllдля привязки к заголовкам,handleCheckedAllа такжеhandleCheckedOne(scope.row)Нам достаточно для выполнения последующих функций, но вы найдете проблему, заголовокcheckboxЭто невозможно проверить, и консоль не сообщит об ошибке.slot="header"добавлено послеslot-scope="scope"и передать область вhandleCheckedAllдаже если прошедший объем не нужен.
Когда мы отмечаем родительский флажок, соответствующий дочерний флажок также выполняет ту же логику, у дочернего элемента также может быть свой собственный дочерний элемент, а ниже него могут быть дочерние элементы. В настоящее время легко думать о рекурсии На самом деле рекурсия очень удобна при решении задач с деревьями.
// boolValue接收一个布尔值
checkOne(obj, boolValue) {
obj.checked = boolValue
// 判断存不存在children,存在就递归赋值
if (obj.children) {
obj.children.forEach(item => this.checkOne(item, boolValue))
}
},
// 绑定每一行checkbox的change事件
handleCheckedOne(row) {
if (row.checked) {
this.checkOne(row, true)
} else {
this.checkOne(row, false)
}
}
Когда мы хотим установить флажок в заголовке, чтобы изменить флажки всех строк, мы хотим изменить массив.
checkAll(arr, boolValue) {
arr.forEach(item => {
item.checked = boolValue
// children同样是数组
if (item.children) {
this.checkAll(item.children, boolValue)
}
})
},
handleCheckedAll(scope) {
// 实际上scope并没有什么用处，仅为了解决上面提到的表头checkbox不显示的bug
// console.log(scope.column)
if (this.checkedAll) {
this.checkAll(this.tableData, true)
} else {
this.checkAll(this.tableData, false)
}
}
перебирать каждую строкуcheckOne()также реализацияcheckAll()Однако вам все равно придется иметь дело с флажком самых внешних данных, что лично мне кажется делает логику кода неясной и плохой общностью.
Рекурсия добавлена для каждого узлаchecked以及获取上述数据的id都有使用到，本文仅展示其在父子树关联这方面的作用。如果我的文章帮到了你，请给我点个赞吧！ ! !