element表格中如何使用switch开关实现整体控制？

前言

在 web 开发中，表格是不可或缺的组件之一。而如何在表格中添加开关控制功能，更是提高用户体验的必要步骤。本文将介绍如何使用 switch 开关实现表格中的整体控制，并保证只有一个为 true，让你的 web 应用更加智能化。

---

实现思路

• 首先要给 el-switch 开关绑定一个自定义的值，disabled 也动态绑定这个自定义的值；
• 在表格列表接口方法中定义一个新的方法：this.filterListByClient()，如果请求成功触发这个方法，同时也是为了不让 el-switch 开关点击后立即触发做的处理；
• 在 this.filterListByClient() 这个方法中通过 foreach 方法遍历表格列表数据，通过当前行的 id 进行判断，将 el-switch 的状态（true 或者 false）动态添加进表格列表数组（list）中（e["enabled"] = true）；
• 表格列表通过返回数组（list）中新加的 enabled 的值控制启用与禁用的状态。

---

核心代码

html

<div>
    <el-table :data="list" border>
      <el-table-column prop="date" label="1"></el-table-column>
      <el-table-column prop="name" label="2"></el-table-column>
      <el-table-column prop="address" label="3"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.delayStatus == -1" type="info">未启用</el-tag>
          <el-tag v-if="scope.row.delayStatus == 3" type="warning">已完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="启用/禁用">
        <template slot-scope="scope">
          <!-- // value:绑定值  disabled:是否禁用   inactive-color:switch关闭时的背景色  active-color:switch打开时的背景色-->
          <el-switch :value="scope.row.enabled" :disabled="scope.row.enabled" @change="changeAutograph(scope.row.id)"
            inactive-color="#A7A7A7" active-color="#17BF6D"></el-switch>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="修改" :visible.sync="isShowDialog" @close="cancelDialog()">
      <el-form ref="ruleForm" :rules="rules" :model="ruleForm">
        <el-form-item label="生效时间" prop="delayTime">
          <el-date-picker v-model="ruleForm.delayTime" value-format="yyyy-MM-dd" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="cancelDialog()">取消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
      </div>
    </el-dialog>
</div>

data

import {tableList,modification} from '@api/lookTaskManagement' //引入的接口文件
export default {
data() {
      return {
        list: [], //表格数据
        tabData: {pageSize: "10",pageNum: "1",total: "0",}, //表格参数
        isShowDialog: false, //弹框默认隐藏
        ruleForm: {
          delayTime: "", //时间绑定值
        },
        rules: {
          //表单的校验规则
          delayTime: [{required: true,message: "必填",trigger: "blur"}],
        },
        numId: "", //后台要的参数
        clientModel: {signAlgorithmId: 0}, //自定义一个值用于在filterListByClient方法中与id进行判断
      }
   },
 }

js

mounted() {
      this.tableList(); //表格列表数据接口方法
    },
    methods: {
      //点击switch事件
      changeAutograph(id) {
        this.isShowDialog = true; //弹框打开
        this.numId = id; //后台要的参数
      },
      //取消操作
      cancelDialog() {
        this.ruleForm.delayTime = "" //日期清空
        this.isShowDialog = false; //弹框隐藏
      },
      //确定修改按钮
      submitForm(formName, callback) {
        //执行校验方法
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //校验通过
            let params = { //传递后端的参数
              signAlgorithmId: this.numId,
              delayTime: this.ruleForm.delayTime,
            };
            //请求接口
            modification(params).then(res => {
              if (res.code == '10000') { //返回数据
                this.isShowDialog = false; //弹框隐藏
                this.$message({
                  showClose: true,
                  message: "修改成功",
                  type: "success",
                });
                this.tableList(); //调用表格方法
              }
            })
          } else {
            console.log("请输入正确的格式!");
            return false;
          }
        });
      },
      //表格列表数据
      tableList() {
        tableList(this.tabData).then(res => {
          if (res.code == '10000') {
            this.list = res.data.data
            this.tabData.total = res.data.total
            this.filterListByClient(); //调用定义的switch的方法
          }
        })
      },
      //自定义的switch方法
      filterListByClient() {
        //遍历list数组
        this.list.forEach((e) => {
          //将当前行的id与data中clientModel.signAlgorithmId的值进行比较判断
          if (e.id == this.clientModel.signAlgorithmId) {
            //如果当前行id等于data中clientModel.signAlgorithmId的值，switch状态为true
            e["enabled"] = true
            e["delayTime"] = this.clientModel.delayTime ?
              new Date(this.clientModel.delayTime).format("yyyy-MM-dd hh:mm:ss") :
              "——"; //时间展示
            e["delayStatus"] = this.clientModel.delayStatus || "0"; //表格状态列展示
          } else {
            //如果当前行id不等于data中clientModel.signAlgorithmId的值，switch状态为false
            e["enabled"] = false
            e["delayTime"] = "————"; //时间展示格式
            e["delayStatus"] = "-1"; //表格状态列展示
          }
        });
      },
    },