As mentioned, element-ui version 2.13.2 supports tree structure tabs and multi-level folding display.
But there is no multi-select + tree tab. It must be implemented when business requirements are met. The operation is to check data editing.
Here we can use two events to achieve:
@select: The user selects a row to trigger the event. The first parameter selection: all selected data. The second parameter row: the selected row of data)
@select-all: Select all and inverse selection trigger events in the table header. There is only one parameter selection: all selected data.
1. Multiple selection processing function (document example):
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {<!-- --><br>// toggleRowSelection has two parameters. The first is each selected data, and the second is whether the row you click to check is selected. The tree structure requires it. Otherwise, if a subset is selected, it will not be selected.
this.$refs.multipleTable.toggleRowSelection(row, true);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
2. Now to deal with multi-selection and radio selection, call toggleSelection.
Because the data structure of the tree structure does not conform to the selected data format, filtering is required.
//Use a normal table, and then perform styling and interactive processing
<el-table
:data="tableData"
ref="multipleTable"
:row-class-name="tabelStyle" // Handle folding style or use :row-style Note that the function must return Object
@select="rowSelect"
@select-all="selectAll"
align="center"
border>
<el-table-column type="selection" width="55"></el-table-column><br>?<el-table-column prop="id" width="55"><br> <template slot-scope="scope"><br> <span @click="togglerShow(scope.row.id)> // Collapse icon and click control<br> <i v-if="scope.row.children & amp; & amp; scope.row.children.length" class="el-icon-arrow-right"></i><br> <i v-else class="el-icon-arrow-down"></i><br> </span><br> <span>{<!-- -->{scope.row.id}}</span><br></template><br>?</el-table-column>
…<br></el-talbe><br><br>//js<br>methods: {<!-- -->
?
tabelStyle({row, rowIndex}) {
const show = row.show ? true : false
return show ? ‘tr-show’ : ‘tr-hide’
},
toggleShow(val) {
this.tableData.map(item => {
if (item.id=== val) {
item.country= item.country + ' ' // Pre-sending does not re-render the data
if (item.children & amp; & amp; item.children.length) {
item.expanded = !item.expanded } else { item.show = !item.show } } }) }
}
?
//scss
// Simulate data source
data = {
list: [
{
"id": "11",
"country": "Australia",
"enable": "1",<br>"region_id": '11',
"children": [
{
"id": "151",
"country": "Capital",<br>"region_id": '11',
"enable": "1"
},
{
"id": "152",
"country": "Territory",<br>"region_id": "11",
"enable": "0",
},
{
"id": "153",
"country": "Northern Territory",<br>"region_id": "11",
"enable": "0"
},
{
"id": "154",
"country": "Queensland",<br>"region_id": "11",
"enable": "1"
},
{
"id": "155",
"country": "South Australia",<br>"region_id": '11',
"enable": "1"
}
]
},
{
"id": "58",
"country": "Austria",<br>"region_id": "12",
"enable": "1"
},
{
"id": "331",
"country": "Azores",<br>"region_id": "13",
"enable": "0"
}
],
message: "success",
status: 200
}
The simple template structure is similar to the simulated data source. As shown above, the children package is hierarchical.
3. Filter function filterSelect. The selected multiple levels need to process data to achieve correct interaction. That is, the data of the children in the levels are taken out in turn to form an array tableData, which is the data source for rendering.
data() {
return {
tableData: [],
level: 1
}
}
//The data source obtained in methods must go through this layer of filtering.
filterSelect(data) {
data.forEach(item => {
item.level = String(this.level) // Level
item.show = this.level === 1? true : false // Determine whether to fold
item.isChecked = false; // Determine whether important parameters are checked
this.tableData.push(item) // Collect filtered data and take out all children data
if (item.children & amp; & amp; item.children.length > 0) {
item.expanded = true // There is a fold under the top level
item.show = true // Top-level display
this.level++
this.recursionArr(item.children)
}
});
}
4. Implement logical check-box interaction
Select all header functions:
selectAll(selection) { // selection is the selected data collection
?this.tableData.map(item => {
item.isChecked = !item.isChecked // Process the isChecked selection status of each piece of data
})
}
Single row (multi-level, currently only level 2) select all, single selection:
rowSelect(selection, row) {
let changeArr = []
if (row.level === '1') {
if (row.isChecked) {
selection.map(item => {
if (row.region_id !== item.region_id) {
changeArr.push(item)
} else {
this.$refs.multipleTable.toggleRowSelection(item)
}
})
} else {
this.tableData.map((item,index) => {
if (row.region_id === item.region_id) {
changeArr.push(item)
}
})
changeArr = changeArr.concat(selection)
}
} else if (row.level === '2') {
changeArr = selection
if (!row.isChecked) {
this.tableData.map(item => {
if (row.region_id === item.region_id & amp; & amp; item.level === '1') {
changeArr.push(item)
}
})
}
}
changeArr = [...new Set(changeArr)] // Remove duplicates
//Update isChecked status
this.tableData.map(item => {
if (item.id === row.id) {
item.isChecked = !item.isChecked
}
})
// positive and negative selection
if (changeArr. length) {
this.toggleSelection(changeArr)
} else {
// Clear all
this.$refs.multipleTable.clearSelection();
}
}
The above can realize the control of multi-selection tree structure.
Note: If you need reference, please pay attention to the parameter configuration in the source data model and template structure, the three functions of selecting all (multi-level), single selection, and filtering. Pay attention to the data source variable name this.tableData inside. Currently, there are many There are only two levels of selection and single selection. Interested students can complete the supplement.
The knowledge points of the article match the official knowledge files, and you can further learn relevant knowledge. Vue entry-level skills treeHomepageOverview 39532 people are learning the system