一文读懂ElementUI中的toggleSelection()函数

前言

在实战中经常看到这个函数，对此总结如下

1. 基本知识

toggleSelection() 是一个函数，通常用于在用户点击某个元素或执行某个操作时，切换该元素的选择状态

常被用来切换 CRUD（Create, Read, Update, Delete） 操作中的选择状态

• 某个元素当前未被选择，那么 toggleSelection() 将选择它
• 已经被选择了，那么 toggleSelection() 将取消选择它

对于该函数详细的解释如下：toggleSelection(enabled?: boolean): this，切换选择的启用状态

名称	类型	必选	默认值	描述
enabled	boolean		-	是否启用选择能力，缺省时切换选择的启用状态

这个函数可以用于许多不同的场景，比如列表中的项目选择、复选框的选中与取消选中、标签的选中等等

类似的Demo如下：

<template>
  <div>
    <ul>
      <li v-for="(item, index) in items" :key="index" @click="toggleSelection(item)">
        {{ item.name }} - {{ item.selected ? 'Selected' : 'Not selected' }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { name: 'Item 1', selected: false },
        { name: 'Item 2', selected: false },
        { name: 'Item 3', selected: false },
      ]
    };
  },
  methods: {
    toggleSelection(item) {
      item.selected = !item.selected;
    }
  }
};
</script>

2. 彩蛋

在实战中一般运用来删除某些行列，致使无法再次被选中

当用户选择了数据并点击 “删除选择的数据” 按钮时，会弹出确认对话框，并在确认后调用 handleDelete() 方法来删除选择的数据。删除完成后，会重新加载数据并清除选择状态，以确保用户下一次操作时从空白的选择状态开始

<template>
  <div>
    <el-table :data="data" style="width: 100%">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
    <el-button @click="handleDelete" type="danger">删除选择的数据</el-button>
  </div>
</template>

<script>
import { getList, remove } from './api'; // 导入数据请求和删除函数

export default {
  data() {
    return {
      data: [],
      selectionList: [],
      page: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      query: {},
      loading: false
    };
  },
  mounted() {
    this.onLoad(this.page);
  },
  methods: {
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection(); // 切换选择状态
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.selectionList.map(item => item.id)); // 删除选中的数据
        })
        .then(() => {
          this.onLoad(this.page); // 重新加载数据
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.selectionClear(); // 清除选择状态
        });
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.selectionClear(); // 在加载新数据后清除选择状态
      });
    }
  }
};
</script>