Element-UI之el-table嵌套select选择器
代码实现
html
<el-table
:data="tableData"
height="550"
style="width: 100%"
row-key="id"
border
default-expand-all
>
<el-table-column label="楼层范围" prop="floorRange">
<template slot-scope="scope">
<el-select
v-model="scope.row.floorRange"
multiple
placeholder="请选择楼层"
@change="CheckedBuildings"
>
<el-option
v-for="item in FloorsOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
<!-- 分割线 -->
<el-divider></el-divider>
<el-checkbox
:indeterminate="isIndeterminate"
class="allselect"
v-model="checkAll"
@change="CheckAllChange(scope.$index)"
>全选</el-checkbox>
</el-select>
</template>
</el-table-column>
</el-table>
讲解:
因为要在table里,这一列绑定的都是同一个值,但是要每一行都要数据互斥,所以在select的v-model=scope.row.data,原来是v-model=tableData.data;scope.row就是绑定的当前行的数据。
data
data() {
return {
selectBuilding: "", //单元格-选择的楼栋
// selectFloorRange: [], //单元格-楼层范围
// selectUnitScope: [], //单元格-单元范围
checkAll: false, //全选
isIndeterminate: false,
// 楼栋选择
BuildingsOptions: [
{
value: "选项1",
label: "A栋"
},
{
value: "选项2",
label: "B栋"
},
{
value: "选项3",
label: "C栋"
}
],
// 楼层范围选择
FloorsOptions: [
{
value: "选项1",
label: "一层"
},
{
value: "选项2",
label: "二层"
},
{
value: "选项3",
label: "三层"
}
],
tableData: [
//表格数据
{
buildings: "1栋", //楼栋
floorRange: [], //楼层范围
unitScope: [] //单元范围
},
{
buildings: "1栋", //楼栋
floorRange: [], //楼层范围
unitScope: [] //单元范围
},
{
buildings: "1栋", //楼栋
floorRange: [], //楼层范围
unitScope: [] //单元范围
}
]
};
},
methods
// 楼层范围全选
CheckAllChange(index) {
if (this.checkAll) {
let array = [];
this.FloorsOptions.forEach(v => {
array.push(v.value);
});
this.tableData[index].floorRange = array;
} else {
this.tableData[index].floorRange = [];
}
this.isIndeterminate = false;
},
CheckedBuildings(value) {
let checkedCount = value.length;
this.checkAll = checkedCount === this.FloorsOptions.length;
this.isIndeterminate =
checkedCount > 0 && checkedCount < this.FloorsOptions.length;
}
遇到的问题
- 获取scope.row绑定的值,在methods里之前获取值,直接this.table.data就可以了,但是我这么写以后发现根本获取不到,翻阅了好几天的博客页没找到原因,最后发现,被自己蠢到;select选择器里绑定的值存到tableData中,tableData是数组,用scope.row绑定值以后,它的值存到了tableData数组的某一个对象中了,如果没有用scope.row就是tableData中所有的值都是一样的。这时我们要根据tableData[index],拿到这一行的数据,在全选按钮定义的事件CheckAllChange(scope.$index) 中将当前行改变的数据的下标传递到方法中,以便获取当前select选择器绑定的值。
- 主要注意的点就是用scope.row绑定数据后,还要传递数组index获取这一行数据。
- 之前自己没有碰到过这种问题,就很手足无措,而且很蠢的是,自己单独定义了select绑定的data,但是应该定义在tableData里的,按理说应该scope.row.tableData.floorRange,但是事实是,加了那个tableData就不行,我这也只是尝试推敲着写,我也不是很懂为什么不可以加,因为不加scope.row的时候不就是v-model=tableData.floorRange吗?如果有路过的大佬可以给解答一下哈~
实现图片
用element-ui实现的,el-table+select,看图
最后,在开发的这条道路上,还要走很远,之后也会遇到各种各样的问题,就一点一点的去解决吧,每一个问题,都是对自己的成长,加油鸭!