current position:Home>In element plus, for example, how to change the checkbox status in the list by clicking on the header and selecting all

In element plus, for example, how to change the checkbox status in the list by clicking on the header and selecting all

2022-04-29 14:48:16segmentfault

As the title , A set of table selection controls are customized in the form of table
image.png
How to click the selection control in the head to change the state of the selection control in the following table
In a nutshell , How to realize all selection / Cancel the function
And get each item in the list checkbox The state of choice ..
What ideas do you have .




Take the answer 1:


I realized it , You can come here and see if it's the result you want Online demo address

The code is as follows :

<template>
  <div class="demo-block">
    <el-table border size="mini" :data="tableData">
      <el-table-column label=" Class hour " 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: ' Section 1 ',
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
        7: false,
      }, {
        date: ' In the second quarter ',
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
        7: false,
      }],
      arr: [
        { name: ' Monday ', value: true },
        { name: ' Tuesday ', value: false },
        { name: ' Wednesday ', value: false },
        { name: ' Thursday ', value: false },
        { name: ' Friday ', value: false },
        { name: ' Saturday ', value: false },
        { name: ' Sunday ', 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>

Inquiry supplement
For convenience , Top use v-for Automatically generated table columns . Of course, you can write it directly , as follows :

<el-table
      border
      size="mini"
      :data="tableData">
      <el-table-column
        label=" Class hour "
        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)"> Monday </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)"> Tuesday </el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row[2]"></el-checkbox>
        </template>
      </el-table-column>
      ...  By analogy 
    </el-table>

It's probably like the above , You need to debug it yourself . Obviously, it's not elegant enough , ha-ha



Other answers 1:


I realized it , You can come here and see if it's the result you want Online demo address

The code is as follows :

<template>
  <div class="demo-block">
    <el-table border size="mini" :data="tableData">
      <el-table-column label=" Class hour " 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: ' Section 1 ',
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
        7: false,
      }, {
        date: ' In the second quarter ',
        1: false,
        2: false,
        3: false,
        4: false,
        5: false,
        6: false,
        7: false,
      }],
      arr: [
        { name: ' Monday ', value: true },
        { name: ' Tuesday ', value: false },
        { name: ' Wednesday ', value: false },
        { name: ' Thursday ', value: false },
        { name: ' Friday ', value: false },
        { name: ' Saturday ', value: false },
        { name: ' Sunday ', 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>

Inquiry supplement
For convenience , Top use v-for Automatically generated table columns . Of course, you can write it directly , as follows :

<el-table
      border
      size="mini"
      :data="tableData">
      <el-table-column
        label=" Class hour "
        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)"> Monday </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)"> Tuesday </el-checkbox>
        </template>
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row[2]"></el-checkbox>
        </template>
      </el-table-column>
      ...  By analogy 
    </el-table>

It's probably like the above , You need to debug it yourself . Obviously, it's not elegant enough , ha-ha

copyright notice
author[segmentfault],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/117/202204271601177846.html

Random recommended