el-table中实现列勾选和行勾选

功能展示:
el-table可以整列勾选，整行勾选，整行和整列勾选，全选取消，单个勾选

主要应用了el-table-column中的render-header方法，手动控制勾选状态
其中每行中的itemCheck${type},checked,isIndeterminate，以及 data中的 isCheck${type}, isIndeterminate${type}都是辅助参数。

目的是为了拿到已勾选的gunCode

代码展示：

  <div>
    <el-button @click="searchList"> 搜索</el-button>
    <el-table
      border
      class="customer-no-border-table"
      element-loading-text="数据正在加载中..."
      :row-class-name="tableRowClassName"
      :header-cell-style="{ background: '#E7F2FD', color: '#252525' }"
      style="width: 100%; border-top: 1px solid #409eff"
      ref="table"
      :data="tableData"
      :row-key="getRowKey"
      max-height="450px"
    >
      <el-table-column
        align="center"
        :resizable="false"
        :render-header="renderHeader"
        fixed="left"
      >
        <template #default="scope">
          <el-checkbox
            :indeterminate="scope.row.isIndeterminate"
            v-model="scope.row.checked"
            @change="select(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        width="50"
        align="center"
        fixed="left"
      >
      </el-table-column>
      <template v-for="type in ['A1', 'B1', 'A2', 'B2', 'A3', 'B3']">
        <div :key="type">
          <el-table-column
            align="center"
            :prop="'ip' + type"
            label="IP"
            min-width="110"
          ></el-table-column>
          <el-table-column
            :resizable="false"
            :render-header="renderHeaderByType(type)"
            align="center"
            min-width="110"
          >
            <template slot-scope="scope">
              <el-checkbox
                v-if="scope.row['gunCode' + type]"
                v-model="scope.row['itemCheck' + type]"
                @change="toggleCheck(scope.row, type)"
              ></el-checkbox>
              {{ scope.row["gunCode" + type] }}
            </template>
          </el-table-column>
        </div>
      </template>
      <div slot="empty">
        <img
          alt="暂无数据"
          src="@/assets/nodata.png"
          style="width: 270px; height: 190px; margin-top: 80px"
        />
        <div style="font-size: 16px; color: #666666; margin-bottom: 80px">
          暂无数据
        </div>
      </div>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //不同功率用到的变量
      isIndeterminateA1: false,
      isIndeterminateB1: false,
      isIndeterminateA2: false,
      isIndeterminateB2: false,
      isIndeterminateA3: false,
      isIndeterminateB3: false,
      isIndeterminate: false,
      isCheckA1: false,
      isCheckB1: false,
      isCheckA2: false,
      isCheckB2: false,
      isCheckA3: false,
      isCheckB3: false,
      isCheckAll: false,
      tableData: [],
      data: {},
    };
  },
  methods: {
    searchList() {
      this.reset();
      this.data = {
        gunList150: {
          gunTypeA: [],
          gunTypeB: [],
        },
        gunList400: {
          gunTypeA: [],
          gunTypeB: [],
          gunTypeC: [],
          gunTypeD: [],
        },
        gunList600: {
          gunTypeA1: [
            {
              uuid: null,
              gunCode: "FFF33A69",
              ip: "10.100.100.156",
              powerType: "01010256",
            },
            {
              uuid: null,
              gunCode: "FFF33A96",
              ip: "10.100.100.145",
              powerType: "01010289",
            },
          ],
          gunTypeB1: [
            {
              uuid: null,
              gunCode: "FFF33A04",
              ip: "10.100.100.125",
              powerType: "01010209",
            },
            {
              uuid: null,
              gunCode: "FFF33A05",
              ip: "10.100.100.125",
              powerType: "01010210",
            },
          ],
          gunTypeA2: [
            {
              uuid: null,
              gunCode: "FFF33A03",
              ip: "10.100.100.125",
              powerType: "01010203",
            },
            {
              uuid: null,
              gunCode: "FFF33A45",
              ip: "10.100.100.125",
              powerType: "01010205",
            },
          ],
          gunTypeB2: [
            {
              uuid: null,
              gunCode: "FFF11A03",
              ip: "10.100.100.121",
              powerType: "01010203",
            },
            {
              uuid: null,
              gunCode: "FFF33B03",
              ip: "10.100.100.126",
              powerType: "01010203",
            },
          ],
          gunTypeA3: [
            {
              uuid: null,
              gunCode: "FFF11A15",
              ip: "10.100.100.121",
              powerType: "01010278",
            },
            {
              uuid: null,
              gunCode: "FFF33B06",
              ip: "10.100.100.126",
              powerType: "01010287",
            },
          ],
          gunTypeB3: [
            {
              uuid: null,
              gunCode: "FFF11A04",
              ip: "10.100.100.121",
              powerType: "01010225",
            },
            {
              uuid: null,
              gunCode: "FFF33B01",
              ip: "10.100.100.126",
              powerType: "01010258",
            },
          ],
        },
      };
      this.formate600(this.data.gunList600);
    },
    // 1.格式化请求的数据并渲染
    formate150(value) {
      if (value) {
        let array = [];
        let a = value.gunTypeA.length;
        let b = value.gunTypeB.length;
        let c = a > b ? value.gunTypeA : value.gunTypeB;
        c.forEach((i, index) => {
          array.push({
            id: index,
            ipA: value.gunTypeA[index] ? value.gunTypeA[index].ip : "",
            ipB: value.gunTypeB[index] ? value.gunTypeB[index].ip : "",
            itemCheckA: false,
            itemCheckB: false,
            gunCodeA: value.gunTypeA[index]
              ? value.gunTypeA[index].gunCode
              : "",
            gunCodeB: value.gunTypeB[index]
              ? value.gunTypeB[index].gunCode
              : "",
            checked: false,
            isIndeterminate: false,
          });
        });
        this.tableData = array;
      } else {
        this.tableData = [];
      }
    },
    formate400(value) {
      if (value) {
        let array = [];
        let a = value.gunTypeA && value.gunTypeA.length;
        let b = value.gunTypeB && value.gunTypeB.length;
        let c = value.gunTypeC && value.gunTypeC.length;
        let d = value.gunTypeD && value.gunTypeD.length;
        let e = Math.max(a, b, c, d);
        console.log(e, "e");
        let f;
        if (e == a) {
          f = value.gunTypeA;
        } else if (e == b) {
          f = value.gunTypeB;
        } else if (e == c) {
          f = value.gunTypeC;
        } else if (e == d) {
          f = value.gunTypeD;
        }
        f.forEach((i, index) => {
          array.push({
            id: index,
            ipA: value.gunTypeA[index] ? value.gunTypeA[index].ip : "",
            ipB: value.gunTypeB[index] ? value.gunTypeB[index].ip : "",
            ipC: value.gunTypeC[index] ? value.gunTypeC[index].ip : "",
            ipD: value.gunTypeD[index] ? value.gunTypeD[index].ip : "",
            itemCheckA: false,
            itemCheckB: false,
            itemCheckC: false,
            itemCheckD: false,
            gunCodeA: value.gunTypeA[index]
              ? value.gunTypeA[index].gunCode
              : "",
            gunCodeB: value.gunTypeB[index]
              ? value.gunTypeB[index].gunCode
              : "",
            gunCodeC: value.gunTypeC[index]
              ? value.gunTypeC[index].gunCode
              : "",
            gunCodeD: value.gunTypeD[index]
              ? value.gunTypeD[index].gunCode
              : "",
            checked: false,
            isIndeterminate: false,
          });
        });
        this.tableData = array;
      } else {
        this.tableData = [];
      }
    },
    // formate600(value) {
    //   if (value) {
    //     let array = [];
    //     let a1 = value.gunTypeA1 && value.gunTypeA1.length;
    //     let b1 = value.gunTypeB1 && value.gunTypeB1.length;
    //     let a2 = value.gunTypeA2 && value.gunTypeA2.length;
    //     let b2 = value.gunTypeB2 && value.gunTypeB2.length;
    //     let a3 = value.gunTypeA3 && value.gunTypeA3.length;
    //     let b3 = value.gunTypeB3 && value.gunTypeB3.length;
    //     let e = Math.max(a1, b1, a2, b2, a3, b3);
    //     console.log(e, "e");
    //     let f;
    //     if (e == a1) {
    //       f = value.gunTypeA1;
    //     } else if (e == b1) {
    //       f = value.gunTypeB2;
    //     } else if (e == a2) {
    //       f = value.gunTypeA2;
    //     } else if (e == b2) {
    //       f = value.gunTypeB2;
    //     } else if (e == a3) {
    //       f = value.gunTypeA3;
    //     } else if (e == b3) {
    //       f = value.gunTypeB3;
    //     }

    //     f.forEach((i, index) => {
    //       array.push({
    //         id: index,
    //         ipA1: value.gunTypeA1[index] ? value.gunTypeA1[index].ip : "",
    //         ipB1: value.gunTypeB1[index] ? value.gunTypeB1[index].ip : "",
    //         ipA2: value.gunTypeA2[index] ? value.gunTypeA2[index].ip : "",
    //         ipB2: value.gunTypeB2[index] ? value.gunTypeB2[index].ip : "",
    //         ipA3: value.gunTypeA3[index] ? value.gunTypeA3[index].ip : "",
    //         ipB3: value.gunTypeB3[index] ? value.gunTypeB3[index].ip : "",
    //         itemCheckA1: false,
    //         itemCheckB1: false,
    //         itemCheckA2: false,
    //         itemCheckB2: false,
    //         itemCheckA3: false,
    //         itemCheckB3: false,
    //         gunCodeA1: value.gunTypeA1[index]
    //           ? value.gunTypeA1[index].gunCode
    //           : "",
    //         gunCodeB1: value.gunTypeB1[index]
    //           ? value.gunTypeB1[index].gunCode
    //           : "",
    //         gunCodeA2: value.gunTypeA2[index]
    //           ? value.gunTypeA2[index].gunCode
    //           : "",
    //         gunCodeB2: value.gunTypeB2[index]
    //           ? value.gunTypeB2[index].gunCode
    //           : "",
    //         gunCodeA3: value.gunTypeA3[index]
    //           ? value.gunTypeA3[index].gunCode
    //           : "",
    //         gunCodeB3: value.gunTypeB3[index]
    //           ? value.gunTypeB3[index].gunCode
    //           : "",
    //         checked: false,
    //         isIndeterminate: false,
    //       });
    //     });
    //     this.tableData = array;
    //   } else {
    //     this.tableData = [];
    //   }
    // },
    // 优化代码
    formate600(value) {
      if (value) {
        let array = [];
        let maxItemCount = 0;
        let maxItemKey = "";

        // 寻找最大数量的枪支类型
        Object.keys(value).forEach((key) => {
          if (value[key] && value[key].length > maxItemCount) {
            maxItemCount = value[key].length;
            maxItemKey = key;
          }
        });

        let gunTypes = value[maxItemKey];

        gunTypes.forEach((item, index) => {
          let newItem = {
            id: index,
            ipA1: value.gunTypeA1?.[index]?.ip || "",
            ipB1: value.gunTypeB1?.[index]?.ip || "",
            ipA2: value.gunTypeA2?.[index]?.ip || "",
            ipB2: value.gunTypeB2?.[index]?.ip || "",
            ipA3: value.gunTypeA3?.[index]?.ip || "",
            ipB3: value.gunTypeB3?.[index]?.ip || "",
            itemCheckA1: false,
            itemCheckB1: false,
            itemCheckA2: false,
            itemCheckB2: false,
            itemCheckA3: false,
            itemCheckB3: false,
            gunCodeA1: value.gunTypeA1?.[index]?.gunCode || "",
            gunCodeB1: value.gunTypeB1?.[index]?.gunCode || "",
            gunCodeA2: value.gunTypeA2?.[index]?.gunCode || "",
            gunCodeB2: value.gunTypeB2?.[index]?.gunCode || "",
            gunCodeA3: value.gunTypeA3?.[index]?.gunCode || "",
            gunCodeB3: value.gunTypeB3?.[index]?.gunCode || "",
            checked: false,
            isIndeterminate: false,
          };
          array.push(newItem);
        });

        this.tableData = array;
      } else {
        this.tableData = [];
      }
    },
    // 创建一个通用函数来处理列选择的过程
    handleColumnSelection(itemCheckProp, isCheckProp, isIndeterminateProp) {
      let length = this.tableData.filter((item) => item[itemCheckProp]).length;
      this[isCheckProp] =
        length === this.tableData.length && this.tableData.length > 0;
      this[isIndeterminateProp] = length < this.tableData.length && length > 0;
    },
    // 回显数据
    showOldData() {
      if (this.tableData) {
        // 回显每一列的全选框的状态
        const columns = ["A1", "B1", "A2", "B2", "A3", "B3"];
        columns.forEach((column) => {
          this.handleColumnSelection(
            `itemCheck${column}`,
            `isCheck${column}`,
            `isIndeterminate${column}`
          );
        });
        //回显每行全选半选的状态
        this.changeRowChecked();
        //回显总的全选框的全选/半选状态
        this.changeAllChecked();
      }
    },
    // 重置
    reset() {
      const columns = ["A1", "B1", "A2", "B2", "A3", "B3"];
      columns.forEach((column) => {
        this[`isCheck${column}`] = false;
        this[`isIndeterminate${column}`] = false;
      });
      this.isCheckAll = false;
      this.isIndeterminate = false;
    },

    getRowKey(row) {
      return row.id;
    },

    // 第一列的全选
    renderHeader(h) {
      return h("span", [
        h("el-checkbox", {
          on: {
            change: this.selectBox,
          },
          props: {
            value: this.isCheckAll,
            indeterminate: this.isIndeterminate,
          },
        }),
      ]);
    },
    selectBox(val) {
      this.isCheckAll = val;
      this.isIndeterminate = false;
      const columns = ["A1", "B1", "A2", "B2", "A3", "B3"];
      this.tableData.forEach((k) => {
        k.checked = val;
        k.isIndeterminate = false;
        columns.forEach((column) => {
          k[`itemCheck${column}`] = val;
          k[`isIndeterminate${column}`] = false;
        });
      });
      columns.forEach((column) => {
        this[`isCheck${column}`] = val;
        this[`isIndeterminate${column}`] = false;
      });
    },
    // 勾选行
    select(row) {
      const checked = row.checked;
      const columns = ["A1", "A2", "A3", "B1", "B2", "B3"];

      this.tableData.forEach((t) => {
        if (row.id === t.id) {
          columns.forEach((column) => {
            t[`itemCheck${column}`] = checked;
          });
          t.isIndeterminate = false;
        }
      });

      const length = this.tableData.length;
      const countChecked = (column) =>
        this.tableData.filter((item) => item[`itemCheck${column}`]).length;

      columns.forEach((column) => {
        const lengthColumn = countChecked(column);
        this[`isCheck${column}`] = lengthColumn === length && length > 0;
        this[`isIndeterminate${column}`] =
          lengthColumn > 0 && lengthColumn < length;
      });
      this.changeAllChecked();
    },

    //控制第一列全选框的状态
    changeAllChecked() {
      const array = this.tableData.reduce((acc, i) => {
        for (let j = 1; j <= 3; j++) {
          if (i["gunCodeA" + j]) {
            acc.push(i["itemCheckA" + j]);
          }
          if (i["gunCodeB" + j]) {
            acc.push(i["itemCheckB" + j]);
          }
        }
        return acc;
      }, []);

      this.isCheckAll = array.length > 0 && array.every((element) => element);
      this.isIndeterminate =
        !this.isCheckAll && array.some((element) => element);
    },

    renderHeaderByType(type) {
      console.log("🚀 ~ renderHeaderByType ~ type:", type);
      return (h) => {
        return h("span", [
          h(
            "el-checkbox",
            {
              on: {
                change: () => this.selectByType(type),
              },
              props: {
                value: this[`isCheck${type}`],
                indeterminate: this[`isIndeterminate${type}`],
              },
            },
            `${type}枪编号`
          ),
        ]);
      };
    },
    selectByType(type) {
      const isCheck = `isCheck${type}`;
      const itemCheck = `itemCheck${type}`;

      this[isCheck] = !this[isCheck];
      this.tableData.forEach((item) => (item[itemCheck] = this[isCheck]));
      this.changeRowChecked();
      this.changeAllChecked();
    },
    // 控制行的选中状态
    changeRowChecked() {
      this.tableData.forEach((item) => {
        const checkedArray = [
          ...["A1", "A2", "A3", "B1", "B2", "B3"].map((column) => {
            return item[`gunCode${column}`] ? item[`itemCheck${column}`] : true;
          }),
        ];

        item.checked = checkedArray.every((element) => element);

        const array = [];
        for (let i = 1; i <= 3; i++) {
          ["A", "B"].forEach((prefix) => {
            const key = `gunCode${prefix}${i}`;
            const checkKey = `itemCheck${prefix}${i}`;
            if (item[key]) {
              array.push(item[checkKey]);
            }
          });
        }

        item.isIndeterminate = this.checkArray(array);
      });
    },
    // 枪编号多选框勾选事件
    toggleCheck(row, type) {
      const checkedArray = [
        ...["A1", "A2", "A3", "B1", "B2", "B3"].map((column) => {
          return row[`gunCode${column}`] ? row[`itemCheck${column}`] : true;
        }),
      ];

      row.checked = checkedArray.every((element) => element);

      const array = [];
      for (let i = 1; i <= 3; i++) {
        ["A", "B"].forEach((prefix) => {
          const key = `gunCode${prefix}${i}`;
          const checkKey = `itemCheck${prefix}${i}`;
          if (row[key]) {
            array.push(row[checkKey]);
          }
        });
      }

      row.isIndeterminate = this.checkArray(array);

      const list = this.tableData.filter((item) => item[`itemCheck${type}`]);
      this[`isCheck${type}`] =
        list.length === this.tableData.length && this.tableData.length > 0;
      this[`isIndeterminate${type}`] =
        list.length > 0 && list.length < this.tableData.length;
      this.changeAllChecked();
    },

    checkArray(arr) {
      const trueCount = arr.filter((element) => element === true).length;
      const falseCount = arr.length - trueCount;

      if (trueCount === arr.length) {
        return false;
      } else if (trueCount > 0 && falseCount > 0) {
        return true;
      } else {
        return false;
      }
    },
    saveData() {
      console.log(this.tableData, "this.tableData");
      let gunCode = [];

      const gunCodeKeys = ["A1", "A2", "A3", "B1", "B2", "B3"];

      this.tableData.forEach((i) => {
        gunCodeKeys.forEach((key) => {
          if (i[`itemCheck${key}`]) {
            gunCode.push(i[`gunCode${key}`]);
          }
        });
      });

      console.log("🚀 ~ saveData ~ gunCode:", gunCode);

      // 去除数组中的空值和重复的值
      gunCode = Array.from(new Set(gunCode.filter((item) => item)));

      let keyName = "menuId" + localStorage.getItem("getMenuId");
      let keyValue = sessionStorage.getItem(keyName);
      let data = keyValue ? JSON.parse(keyValue) : {};
      data.gunCode600 = gunCode;
      sessionStorage.setItem(keyName, JSON.stringify(data));
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 1) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>

<style lang="scss" scoped></style>