vue+element 实现table 某一行变色

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+element 实现table 某一行变色相关的知识,希望对你有一定的参考价值。

参考技术A 产品需求是 提示操作人手动修改订单
效果

饿了么 提供了api
row-style

vue基于element实现表格中点击某一行全选框选中此行所有选框

前言

一般情况下,我们对表格进行批量操作时,会选中表格对应的列,通过表头上的一个选框即可控制整个表格对应列选框的状态;如果想要在某一行中通过一个选框控制当前行所有选框全选与反选该如何操作呢?下面一起看看实操吧。

效果如下:

实现思路:

全选事件中我们需要拿到每一项数据绑定的 model 与当前点击的框的 id 进行比较,如果相同将其用 push 方法添加到定义好的数组中,全不选使用 indexOf 方法匹配对应 id 通过 splice 方法删除即可;点击单个的选框时,我们则需要拿到点击选框的状态 (true/false) 值,通过此状态去控制全选框的状态 (选中/未选中)

源码:

<template>
  <div style="padding:10px">
    <!-- 表格 -->
    <el-table :data="tableData" border>
      <el-table-column prop="children" label="权限">
        <template slot-scope="scope">
          <!-- n个多选框框 -->
          <el-checkbox-group v-model="checkList">
            <el-checkbox @change="(e) => multiple(e, scope.row.id)" v-for="(item, index) in scope.row.children" :key="index"
              :label="item.id"> item.name </el-checkbox>
          </el-checkbox-group>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 全选框 -->
          <el-checkbox v-model="scope.row.checkAll" :label="scope.row.name" @change="(e) => checkAll(e, scope.row.id)"></el-checkbox>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default 
  data() 
    return 
      checkList: [], //复选框绑定model
      tableData: [//模拟数据
        
          checkAll: false,
          id: 1,
          name: "全选",
          children: [
            
              multiple: false,
              id: 11,
              name: "单选1",
            ,
            
              multiple: false,
              id: 12,
              name: "单选2",
            ,
            
              multiple: false,
              id: 13,
              name: "单选3",
            ,
          ],
        ,
        
          checkAll: false,
          id: 2,
          name: "全选",
          children: [
            
              multiple: false,
              id: 21,
              name: "单选1",
            ,
            
              multiple: false,
              id: 22,
              name: "单选2",
            ,
            
              multiple: false,
              id: 23,
              name: "单选3",
            ,
          ],
        ,
      ],
    ;
  ,
  methods: 
    // 全选事件
    checkAll(type, id) 
      // 每一项数据绑定的model与当前点击的框相同时返回下标
      const index = this.tableData.findIndex((item) => 
        return item.id == id;
      );
      // 被点击当前行的数据
      const resValue = this.tableData[index];
      if (type) 
        // 全选
        resValue.children.forEach((item) => 
          if (this.checkList.indexOf(item.id) == -1) 
            this.checkList.push(item.id);
          
        );
       else 
        // 全不选
        resValue.children.forEach((item) => 
          this.checkList.splice(this.checkList.indexOf(item.id), 1);
        );
      
    ,
    // n个多选框事件
    multiple(type, id) 
      // 每一项数绑定的model与当前点击的框相同时返回下标
      const index = this.tableData.findIndex((item) => 
        return item.id == id;
      );
      // 当前行的数据
      const resValue = this.tableData[index];
      // 当前行的check值
      const checkValue = [];
      // 用户选中的check值
      const _checked = [];
      resValue.children.map((item) => 
        checkValue.push(item.id);
        this.checkList.map((cItem) => 
          if (item.id == cItem) 
            _checked.push(cItem);
          
        );
      );
      if (type) 
        if (checkValue.toString() == _checked.toString()) 
          resValue.checkAll = true;
        
       else 
        if (checkValue.toString() != _checked.toString()) 
          resValue.checkAll = false;
        
      
    ,
  ,
;
</script>
开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系

以上是关于vue+element 实现table 某一行变色的主要内容,如果未能解决你的问题,请参考以下文章

JQuery:如何使table的某一行变色呢?

web前端-Vue Element table多选表格实现单选

js中table的关于选中某一行的问题

Vue 中Element的table多选表格实现单选,并且多选表格中表头的多选框不显示或隐藏

Vue 中Element的table多选表格实现单选,并且多选表格中表头的多选框不显示或隐藏

请问elementui 表格的el-radio 选中某一行,拿到某一行的数据