Element-UI之el-table嵌套select选择器
代码实现
html
全选
讲解： 因为要在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吗？如果有路过的大佬可以给解答一下哈~
文章图片
最后，在开发的这条道路上，还要走很远，之后也会遇到各种各样的问题，就一点一点的去解决吧，每一个问题，都是对自己的成长，加油鸭！
