首页 > 其他分享 >自定义全选框,当勾选√添加到selection中,再次勾选从selection中移除

自定义全选框,当勾选√添加到selection中,再次勾选从selection中移除

时间:2024-07-23 14:56:17浏览次数:10  
标签:selectStation selection checked 自定义 index allSelected 移除 false row

 <el-table
            :data="tableData"
            ref="tableData"
            height="450px"
            class="customer-no-border-table"
            :row-class-name="tableRowClassName"
            :header-cell-style="{ background: '#E7F2FD', color: '#252525' }"
            style="width: 100%; border-top: 1px solid #409eff"
            border
          >
            <el-table-column
              width="55"
              align="center"
              :render-header="renderHeader"
              ><template v-slot="{ row }">
                <el-checkbox
                  v-model="row.checked"
                  @change="handleCheckboxChange(row, $event)"
                >
                </el-checkbox>
              </template>
            </el-table-column>
            <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center"
            ></el-table-column>
            <div slot="empty">
              <img
                src="@/assets/nodata.png"
                style="width: 270px; height: 190px; margin-top: 80px"
                alt="暂无数据"
              />
              <div
                style="
                  font-size: 16px;
                  color: #666666;
                  margin-bottom: 80px;
                  width: 270px;
                "
              >
                暂无数据
              </div>
            </div>
            <el-table-column
              v-for="(item, index) in columns"
              :width="item.width"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :formatter="item.formatter"
              :show-overflow-tooltip="true"
              align="center"
            ></el-table-column>
          </el-table>
allSelected: false, // 是否全选
indeterminate: false, // 是否为半选状态
  watch: {
    selectStation: function (newVal, oldVal) {
      if (
        newVal.length === this.tableData.length &&
        this.tableData.length > 0
      ) {
        this.allSelected = true;
        this.indeterminate = false;
      } else if (newVal.length === 0) {
        this.allSelected = false;
        this.indeterminate = false;
      } else {
        this.allSelected = false;
        this.indeterminate = true;
      }
    },
  },
  handleCheckboxChange(row, checked) {
      if (this.rightbox && this.name !== "停车场设置") {
       
      } else {
        this.updateSelectStation(row, checked);
      }
    },
    updateSelectStation(row, checked) {
      this.tableData.forEach((i) => {
        if (i.buildId == row.buildId) {
          row.checked = checked;
        }
      });
      if (checked) {
        const index = this.selectStation.indexOf(row);
        if (index == -1) {
          this.selectStation.push(row);
        }
      } else {
        const index = this.selectStation.indexOf(row);
        console.log("

标签:selectStation,selection,checked,自定义,index,allSelected,移除,false,row
From: https://www.cnblogs.com/hxy--Tina/p/18318450

相关文章

  • Android开发 - ViewGroup解析与自定义
    ViewGroup解析ViewGroup是一个特殊的View,可以包含其他视图(称为子视图)。而ViewGroup是View的子类,所以ViewGroup可以当成普通的UI组件使用。ViewGroup是布局和视图容器的基类,该类还定义了ViewGroup.LayoutParams用作布局参数基类的类由于ViewGroup的直接子类和间接子类比较......
  • vue element-ui表格table 表格动态 添加行、删除行、添加列、删除列 自定义表头
       vuetable表格动态添加行、删除行、添加列、删除列自定义表头; 增加一行、删除一行、添加一列、删除一列;每行带输入框input代码1、HTML部分:<template><divclass="app-container"><el-table:data="tableData"borderstyle="width:600px;margin-top:2......
  • echarts的markline自定义起始位置和终点位置
    letmarkPoint=[10,20];markLine:{symbol:["none","none"],//去掉箭头silent:true,label:{show:true,formatter:"{b}",offset:[-......
  • 可视化自定义表单开源的突出优势表现在哪里?
    随着数字化发展潮流的袭来,降本、增效、提质的办公效率得到了很多企业朋友的喜爱与支持。那么,该如何实现这一目标?又如何帮助企业降低开发成本、提升办公效率?想要了解这些详细信息,可以关注低代码技术平台、可视化自定义表单开源的相关信息。流辰信息也将持续做好自主研发创新,为行业......
  • 定制化智能:Mojo模型与自定义损失函数的深度融合
    定制化智能:Mojo模型与自定义损失函数的深度融合在机器学习领域,损失函数是衡量模型预测值与实际值差异的关键指标,它直接影响到模型训练的效果和最终性能。Mojo模型,作为一种高效的模型部署方式,其对自定义损失函数的支持是实现高级机器学习应用的重要特性。本文将详细探讨Mojo......
  • php通用防伪溯源查询系统可自定义字段
    性能描述:1.适合中小规模查询,建议100万条以内(具体视服务器配置)。2.自定义前台是否使用验证码,即可以自行开启/关闭验证码。3.灵活支持N列内容,只要前几列按照规则;其余列均自定义内容。4.可单个新加,也可以批量外部导入。。。后台功能:1.单管理员登录页面,修改密码页面......
  • 云原生周刊:Kubernetes v1.31 中的移除和主要变更|2024.7.22
    开源项目ArgoRolloutsArgoRollouts是一个Kubernetes控制器和一组自定义资源定义(CRDs),提供高级部署功能,例如蓝绿部署、金丝雀部署、金丝雀分析、实验以及渐进式交付功能给Kubernetes。ArgoRollouts可选地集成了Ingress控制器和服务网格,利用它们的流量塑形能力,在更新期......
  • 自定义测试器
    测试器测试器总是返回一个布尔值,它可以用来测试一个变量或者表达式,使用”is”关键字来进行测试。{%setname='ab'%}{%ifnameislower%}<h2>"{{name}}"arealllowercase.</h2>{%endif%}测试器本质上也是一个函数,它的第一个参数就是待测试的变量,在模板中使......
  • 代码随想录算法训练营第一天leetcode704二分查找27移除元素
    leetcode704,这是leetcode提交四次后通过的结果:classSolution{  publicintsearch(int[]nums,inttarget){    if(nums.length==1&&nums[0]==target)      return 0;    if(nums.length==2)      if(nums[0]==target)......
  • 自定义过滤器
    代码实现: fromflaskimportFlask,render_templateapp=Flask(__name__)defget_top3(list):#返回列表前三个returnlist[:3]#方式一:注意一个过滤器app.jinja_env.filters["get_top"]=get_top3#方式二@app.template_filter('get_qu')defget_qu(li......