element-ui 使用自定义复选框-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui 使用自定义复选框。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

为什么不使用自带复选框？

自带复选框无法确定数据来源于回填还是用户手动选择，因为回填表格复选框时只能使用toggleRowSelection方法来遍历回填，而且会触发selection-change事件，而手动添加也会触发selection-change事件，无法判断某个选中数据来源于回填还是用户手动选择。

无法满足某些需要，

需求也挺奇葩，表格选择完后下方有个开关，每次提交开关状态需要独立，第一次选了1,2,5以及开关为关，再次打开时(第二次)回填1，2,5，且保存每一行的开关状态，再选3,4，6时开关打开，此时数据应该为1,2,5,关且3,4，6为开。如果第二次选择3,4,5.此时数据为：1，2为关，3,4,5为开

无法满足的需求简单讲就是：之前数据未变更保留原来的状态，有变更（取消/取消在选中）则使用新状态。

具体实现功能：

单选，多选，跨页选，半选,

详见代码入选文章来源地址https://www.toymoban.com/news/detail-576122.html

<template>
  <div class="main-content">
    <!-- 使用自己的表格多选系统 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column width="120">
        <!-- slot-scope="scope"这个不能少,不然checkbox会存在问题 -->
        <template slot="header" slot-scope="scope">
          <el-checkbox
            v-model="checkAll"
            @change="handleAllChange"
            :indeterminate="isIndeterminate"
            >全选</el-checkbox
          >
        </template>
        <template slot-scope="{ row }">
          <el-checkbox
            @change="handleSelectChange($event, row)"
            :value="checkIds.includes(row.shopId)"
            ></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="shopId" width="120">
        <template slot-scope="scope">{{ scope.row.shopId }}</template>
      </el-table-column>
      <el-table-column prop="shopName" label="姓名" width="120">
      </el-table-column>
    </el-table>
    <div class="pagebox pall15">
      <div class="eboss-row mt20 justify-center">
        <div class="page-scroll">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageIndex"
            :page-sizes="pageSizes"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalCount"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mock from "mockjs";
export default {
  name: "tableListDemo",
  desc:"不使用表格自带的勾选,使用自定义勾选",
  data() {
    return {
      totalCount: 0,
      pageIndex: 1,
      pageSize: 10,
      pageSizes: [10, 20, 30, 40],
      tableData: [],
      checkIds: [],//选中的id,可包含跨页数据
      checkAll: false,//当页的全选按钮状态
      isIndeterminate: false,//当页全选按钮的半选状态
    };
  },
  mounted() {
    this.queryList();
  },
  methods: {
    queryList() {
      let params = {
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      };
      const res = mock.mock({
        success: true,
        model: {
          "shopList|3": [
            {
              shopId: "@id",
              shopName: "@cname",
            },
          ],
        },
        pageIndex: 1,
        totalCount: 500,
        pageSize: 10,
      });
      res.model.shopList.unshift(
        ...[
          {
            shopId: 8888,
            shopName: 8888,
          },
          {
            shopId: 9999,
            shopName: 9999,
          },
        ]
      );
      console.log("mockData--", res);
      if (res.success) {
        this.totalCount = res.totalCount;
        this.tableData = res.model.shopList;
      } else {
        this.$alert(res.errorMessage, "提示");
      }
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageIndex = 1;
      this.queryList();
    },
    handleCurrentChange(pageIndex) {
      this.pageIndex = pageIndex;
      this.queryList();
    },
    // 行内单选选择
    handleSelectChange(e, row) {
      if (e == true) {
        // 从未选中==>选中
        this.checkIds.push(row.shopId);
      } else {
        let index = this.checkIds.findIndex((e) => e == row.shopId);
        this.checkIds.splice(index, 1);
      }
      const currentTableIds = this.tableData.map((e) => e.shopId);
      const currentTableCheckedIds = currentTableIds.filter((e) =>
        this.checkIds.includes(e)
      );
      this.checkAll = currentTableCheckedIds.length == currentTableIds.length;
      this.isIndeterminate =
        currentTableCheckedIds.length > 0 &&
        currentTableCheckedIds.length < currentTableIds.length;
    },
    // 页内全选选择
    handleAllChange(e) {
      const currentTableIds = this.tableData.map((e) => e.shopId);
      this.isIndeterminate = false;
      if (e == true) {
        // 从未选中==>选中
        let ids = this.checkIds.concat(currentTableIds);
        // id需去重
        this.checkIds = [...new Set(ids)];
      } else {
        // 取消勾选,从选中id列表里把当前页的所有id均移除
        this.checkIds = this.checkIds.filter((e) => {
          return !currentTableIds.includes(e);
        });
      }
    },
  },
};
</script>

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

到了这里，关于element-ui 使用自定义复选框的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！