element plus 中如自定义表格点击头部全选如何改变列表中的checkbox状态

Z时代
2024-02-07
分类：IT

如题，以表格的形式自定义了一组表格选择控件
element plus 中如自定义表格点击头部全选如何改变列表中的checkbox状态
如何点击头部的选择控件改变下面表格选择控件的状态
简单一点说就是，如何实现全选/取消功能
并获取列表中各checkbox的选择状态。。
请问有什么思路。

回答：

element plus 中如自定义表格点击头部全选如何改变列表中的checkbox状态
我实现了一下，可以到这里看下是不是你想要的结果在线演示地址

代码如下：

<template>
  <div class="demo-block">
    <el-table
      border
      size="mini"
      :data="tableData">
      <el-table-column
        label="课时"
        prop="date"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        v-for="(item, index) in arr"
        :key="index"
      >
        <template slot="header">
          <el-checkbox :v-model="item.value" @change="handleCheck(index, $event)">{{item.name}}</el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row[index+1]"></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  name: "check",
  data() {
    return {
      tableData: [{
        date: '第一节',
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
        7: false,
      }, {
        date: '第二节',
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
        7: false,
      }],
      arr: [
        { name: '星期一', value: true },
        { name: '星期二', value: false },
        { name: '星期三', value: false },
        { name: '星期四', value: false },
        { name: '星期五', value: false },
        { name: '星期六', value: false },
        { name: '星期日', value: false },
      ],
      1: false,
      2: false,
    }
  },
  methods: {
    handleCheck(index, e) {
      this.tableData.forEach(item => {
        item[index+1] = e
      })
    }
  }
}
</script>
<style scoped>
.demo-block {
  width: 80%;
  margin: 100px auto;
}
</style>

追问补充
为了方便，上边使用v-for自动生成了表格列。当然可以直接写死，如下：

<el-table
      border
      size="mini"
      :data="tableData">
      <el-table-column
        label="课时"
        prop="date"
        width="180">
      </el-table-column>
      <el-table-column
        align="center"
        prop="1"
      >
        <template slot="header">
          <el-checkbox v-model="1" @change="handleCheck(1, $event)">星期一</el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row[1]"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="2"
      >
        <template slot="header">
          <el-checkbox v-model="1" @change="handleCheck(2, $event)">星期二</el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row[2]"></el-checkbox>
        </template>
      </el-table-column>
      ... 依次类推    </el-table>