vue Element-ui 表格多选 修改选中行背景色

先来看看效果图：

整体思路方式：

• 给获取到的数据添加自定义的className
• 在点击行(row-click)和手动点击勾选框的事件(select-all)中获取到当前的row的className,直接修改className即可 点击查看事件说明
• 在行的 className 的回调方法中(row-class-name)直接返回className

提示

还有另一种方式通过获取row进行循环，判断当前点击row的id或者index与数据的是否相等，然后存放点击后的row到新的数组中，这种方式因为触及到遍历。当我有500行数据或者很多行数据，可想而知这里要遍历多少次，还有另一个就是连续点行的颜色发生变化会有延迟，相对来说性能就不好了。

步骤如下

1、给数据添加自定义className, 由于这里演示的是本地数据，是直接添加的className; 真实开发是通过接口去加载数据，获取到的数据 直接遍历 赋值就可以，后面就不用管遍历了

data() {
    return {
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          className: "normal",
        },
      ],
    };

2、点击行和点击勾选框的事件

methods: { 
   // 手动点击勾选框触发的事件
    handleSelect(selection, row) {
      // selection,row  传递两个参数，row直接是对象
      // 只传一个参数得到的是数组
      if (row.className === "normal") {
        row.className = "tableSelectedRowBgColor";
      } else {
        row.className = "normal";
      }
    },

    // select-all 手动点击全选触发的事件
    handleSelectAll(selection) {
      if (selection.length > 0) {
        selection.forEach((item) => {
          if (item.className === "normal") {
            item.className = "tableSelectedRowBgColor";
          }
        });
      } else {
        // 空数组初始化className
        this.tableData.forEach((item) => {
          if (item.className === "tableSelectedRowBgColor") {
            item.className = "normal";
          }
        });
      }
    },

    //点击行触发，切换复选框状态
    handleRowClick(row) {
      this.$refs.multipleTable.toggleRowSelection(row);
      if (row.className === "normal") {
        row.className = "tableSelectedRowBgColor";
      } else {
        row.className = "normal";
      }
    },

}

3、className的回调方法

methods: {
    // 选中背景色
    tableRowClassName({ row }) {
      return row.className;
    },
}

4、最后不要忘了写颜色类名喔

<style>
.tableSelectedRowBgColor td {
  background-color: #fedcbd !important;
}
</style>

如何给element-ui table的数据增加悬浮提示？

场景：要使表格中的数据文字不换行，鼠标放上去就显示数据内容，就像那种tip提示。该怎么实现呢？

只需加个属性就能实现，没错就是这么简单，就让我们一起来看看吧！

先来看看效果图

这里我们用到 show-overflow-tooltip属性，官方解释：默认情况下若内容过多会折行显示，若需要单行显示可以使用show-overflow-tooltip属性，它接受一个Boolean，为true时多余的内容会在 hover 时以 tooltip 的形式显示出来。

<el-table :data="tableData">
         <el-table-column
                    label="表头内容"
                    align="center"
                    show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>Hong Yuan International</span>
                </template>
            </el-table-column>
 </el-table>

如何给element-ui table的表头增加悬浮提示？

场景：要使表格中的表头文字不换行，鼠标放上去就显示表头内容，就像那种tip提示。该怎么实现呢？恰好这两个element都提供了，就让我们一起来看看吧！

先来看看效果图

步骤

1、首先我们可以设置超出让文本省略号显示（根据需求而定），注意：要设给表格的.cell的div才生效哦！

.el-table th>.cell{
    white-space: nowrap; /* 文本在一行显示，不换行 */
　　text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本。*/
　　overflow: hidden; /* 超出部分隐藏 */
}

2、这里我们要使用自定义表头，官网介绍点这里 (opens new window)，在最后的 Scoped Slot 介绍就是。

3、代码

<el-table :data="tableData">
 　　　　　　<el-table-column align="center">
                <template slot="header" slot-scope="scope">
                    // ele的消息提示组件
                    <el-tooltip content="店铺退款总额$" placement="top" effect="light">
                        <span>店铺退款总额$</span>
                    </el-tooltip>
                </template>
                <template slot-scope="scope">
                    <span>{{scope.row.数据}}</span>
                </template>
            </el-table-column>
</el-table>

解析

• 第一个templete设置 slot="header"，就是表头的内容；第二个templete没有设置 就是表格行的内容；

• el-tooltip 的content设置悬浮显示的内容，span就是表头内容，具体可参考官网介绍；

• 表格的数据、使用template的数据关联，自行翻阅官网介绍，这里就不多描述了；

到此就设置完成了，就实现悬浮表头显示内容啦！