elementUi在table组件中添加多选条件

先上图

该图前面的为全选框，后面的为多选框

数据

      tableData: [
        {
          id:1,					//id
          name: "11",			//大类名
          checkedCities: [],	//用来存放选中的小类，并表示小类选中状态
          indeterminate: false,	//半选中状态
          checkAll: false,		// 大类的选中状态
          cityOptions: [],		//小类
        },
        {
          id:2,
          name: "22",
          checkedCities: [],
          indeterminate: false,
          checkAll: false,
          cityOptions: ["2-1", "2-2","2-3","2-4"],
        },
        {
          id:3,
          name: "3",
          checkedCities: [],
          indeterminate: false,
          checkAll: false,
          cityOptions: ["3-1", "3-2","3-3","3-4","3-5"],
        },
        {
          id:4,
          name: "4",
          checkedCities: [],
          indeterminate: false,
          checkAll: false,
          cityOptions: [],
        },
      ],

1Table 表格将数据进行绑定

• 这是一个多维数组结构
• 大类和小类绑定的v-model不能将其直接在data中注册，否则容易进行整个大数组的修改
• 大类绑定的v-model相应的scope.row.checked 用来true或false自己大类的点击状态
• 小类绑定的v-model相应的scope.roe.checkedCities 用来存储自己所点击的小类数组

---

table代码：

          <el-table :data="tableData" :show-header="false" style="width: 100%">
            <el-table-column label="大类" width="180">
              <template slot-scope="scope">
                <el-checkbox
                  @change="handleAllCheck(scope.row)"
                  :label="scope.row.name"
                  v-model="scope.row.checked"
                  :indeterminate="scope.row.indeterminate"
                  >{{ scope.row.name }}</el-checkbox
                >
              </template>
            </el-table-column>
            <el-table-column label="小类">
              <template slot-scope="scope">
                <el-checkbox-group v-model="scope.row.checkedCities">
                  <el-checkbox v-for="item in scope.row.cityOptions" @change="handleCheckedChange(scope.row)" :label="item" :key="item">{{ item }}</el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

2半选、多选、全选

得获取到当前选中的行的所有内容。内容中就包括了 checked全选选中状态，cityOptions小类的选中个数

	// 从小类选中大类
    handleCheckedChange(value) {
      let count = value.cityOptions.length
      // 若其中小类的checkedCities的长度与自己本身的相等，则大类的checked为true
      value.checked = (count === value.checkedCities.length) ? true : false;
      // 若小类的checkedCities的长度大于0，并且小于cityOptions（它本身所含有的数组）长度则为半选
      value.indeterminate = value.checkedCities.length > 0 && value.checkedCities.length < value.cityOptions.length
    },
    // 全选   该方法能直接进行大类 checked的修改  不需要再进行判断
    handleAllCheck(val) {
      // 若大类的checked并未被选中，则将小类checkedCities 赋值cityOptions 
      val.checkedCities = val.checked ? val.cityOptions : []
      // 半选取消
      val.indeterminate = false
    },

坑：在element上面，小类的点击事件是绑定在groups上面的，但是由于element的groups的input事件的点击时有滞后，所有应该直接给el-checkbox绑定，否则将会在全部小类选中时，大类并未选中，而是在下一次点击时才会显示