Element-UI 使用合集

·  阅读 2856
Element-UI 使用合集

这是我参与更文挑战的第1天,活动详情查看: 更文挑战

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

先来看看效果图:

Animation3.gif 整体思路方式:

  • 给获取到的数据添加自定义的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提示。该怎么实现呢?

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

先来看看效果图

14.png

这里我们用到 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都提供了,就让我们一起来看看吧!

先来看看效果图

15.png

步骤

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

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

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

16.png 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的数据关联,自行翻阅官网介绍,这里就不多描述了;

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

分类:
前端
标签: