element的全选多选和反选

element中el-tabel的多选全选和反选

记录一下，以防自己忘记！！！

• row-key：指定el-table每一行数据的唯一标识符，用于在表格操作中进行准确的匹配和更新

:row-key="
          (row) => {
            return row.id;
          }
        "
ref="multipleTable"

• reserve-selection=“true”，简单来说就是在切换页码时，之前选择的行将会被保留选中状态。

<el-table-column
     type="selection"
     :reserve-selection="true"
 ></el-table-column>

• this.$refs.multipleTable.toggleRowSelection(i, true);
• 是通过引用调用表格组件实例的方法来切换某一行的选中状态
• 第一个参数 i：代表选中状态的行的索引或唯一标识符。
• 第二个参数 true：表示将该行设置为选中状态。若传入 false 则表示将该行设置为非选中状态。
• 注意：上面的只适用于element-ui的el-table组件中，
自定义组件需改成this.$refs?.multiple?.$refs?.multiple.toggleRowSelection(i, true)

el-checkbox的全选反选和多选

indeterminate 是一个用于Checkbox的选中状态，表示选中状态不确定或半选中的情况

 <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="selectAll"
          @change="handleSelectAll"
          >全选</el-checkbox
        >

完整代码

index.js

<template>
  <div class="">
    <el-button @click="clickDialog">点击打开弹窗</el-button>
    <Dialog ref="Dialog"></Dialog>
  </div>
</template>

<script>
import Dialog from './component/dialog.vue'
export default {
  name: "",

  props: {},

  components: {
    Dialog
  },

  data() {
    return {
      list:['a','b','c']
    };
  },

  computed: {},

  watch: {},
  created() {},

  methods: {
    clickDialog(){=
      //打开弹窗
      this.$refs.Dialog.dialogVisible=true;
      //向弹窗传值
      this.$refs.Dialog.init(this.list);
    }
  },

  mounted() {},
};
</script> 

dialog.vue

<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      @close="handleClose"
      width="30%"
      title="标题"
    >
      <!-- 表格-->
      <el-table
        :data="listView"
        stripe
        style="width: 100%"
        :header-cell-style="{ background: '#F2F2F7' }"
        :row-key="
          (row) => {
            return row.id;
          }
        "
        ref="multipleTable"
        @selection-change="handleSelectionChange"
      >
        <!-- :reserve-selection="true"，简单来说就是在切换页码时，之前选择的行将会被保留选中状态。 -->
        <el-table-column
          type="selection"
          :reserve-selection="true"
        ></el-table-column>
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="code" label="编码"> </el-table-column>
        <el-table-column prop="name" label="名称"> </el-table-column>
        <el-table-column prop="value" label="数据"> </el-table-column>
      </el-table>
      <!-- 多选框 -->
      <div class="check">
        <el-checkbox
          :indeterminate="isIndeterminate"
          v-model="selectAll"
          @change="handleSelectAll"
          >全选</el-checkbox
        >
        <el-checkbox-group
          v-model="selectedItems"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            v-for="item in listView"
            :key="item.name"
            :label="item.name"
            >{{ item.name }}</el-checkbox
          >
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="confirm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
      
  <script>
export default {
  name: "",

  props: {},

  components: {},

  data() {
    return {
      dialogVisible: false,
      isIndeterminate: true,
      selectAll: false,
      selectedItems: [],
      listView: [
        { name: "a", code: "01", value: "1" },
        { name: "b", code: "02", value: "2" },
        { name: "c", code: "03", value: "3" },
        { name: "d", code: "04", value: "4" },
        { name: "e", code: "05", value: "5" },
        { name: "f", code: "06", value: "6" },
      ],
    };
  },
  created() {},
  computed: {},
  watch: {},
  methods: {
    // 从父组件传递过来的值
    init(val) {
      // 反选
      this.listView.forEach((i) => {
        val.forEach((j) => {
          // 如果传递的值和某项相同则选中此条数据
          if (i.name == j) {
            //没有加延迟，会报Cannot read properties of undefined (reading 'toggleRowSelection')"
            // 如果不报也可以不加
            setTimeout(() => {
              // 重要代码
              this.$refs.multipleTable.toggleRowSelection(i, true);
            }, 10);
          }
        });
      });
      // el-checkout的反选
      this.selectedItems = val;
    },
    // 可以获得当前el-table选中和全选的数据
    handleSelectionChange(val) {},
    // 多选
    handleCheckedCitiesChange(value) {
      let name = value.length;
      // 选中的值的数量是否与获取值数量会否相等
      if (name === this.listView.length) {
        this.selectAll = true;
      } else {
        this.selectAll = false;
      }
      // indeterminate 是一个用于Checkbox的选中状态，表示选中状态不确定或半选中的情况
      this.isIndeterminate = name > 0 && name < this.listView.length;
      this.selectedItems = value;
    },
    // 全选
    handleSelectAll(checked) {
      if (checked) {
        // 如果checkbox的v-model为true时
        this.selectedItems = this.listView.map((item) => item.name);
      } else {
        this.selectedItems = [];
      }
      this.isIndeterminate = false;
    },
    // 确定
    confirm() {
      this.dialogVisible = false;
    },
    // 取消
    cancel() {
      this.dialogVisible = false;
    },
    // 弹窗关闭
    handleClose() {},
  },

  mounted() {},
};
</script>
  <style scoped>
    /*只是想好看点  */
.check {
  text-align: left;
}
::v-deep .el-checkbox {
  width: 100%;
  margin-top: 10px;
}
</style>