Element-UI之el-table嵌套select选择器

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，看图

最后，在开发的这条道路上，还要走很远，之后也会遇到各种各样的问题，就一点一点的去解决吧，每一个问题，都是对自己的成长，加油鸭！