el-table 默认选中 全选 单元格样式等

​ 好久没有写文了，今天突发奇想就来记录一下，这段时间学习到的一些小的知识点。

​ 最近做项目要使用elementui里的table组件，所实现的也要比较"花里胡哨"，下面就说说，el-table组件的一些高级一点的使用了。

1. el-table-column type=selection

要求：在el-table的表格中，第一列为选择列，第一行选择框旁要加上全选的字样。

实现思路：官网介绍里，有type=selection会实现第一列为选择列的需求，但其第一行没有文本显示，需要使用css的伪类进行文本修饰。

实现代码：

.selectionRes .cell:before {
  content: "全选";
  position: absolute;
  right: 11px;
}

实现效果：

2. el-table-column 文字样式

要求：根据该列不同的值显示不同的样式。

实现思路：使用el-table自带的cell-style属性，动态设置单元格中文本的样式。

实现代码：

	...

//示例单元格中只有两种值，一种为“失效”,一种为“有效”
setStatusStyle({ row, column }) {
    if (column.label === "状态") {
        if (row.status === "有效") {
            return "color:#71C647";
        } else {
            return "color:#F67E7E";
            }
        }
},

实现效果：

3. el-table-column 默认选择

要求：默认选择type=selection的选择框

实现思路：使用toggleRowSelection方法，实现默认选择。

注意：这里还需要注意一点，因为这个需要默认选中的table，在子组件里的dialog组件里，并且子组件dialog未触发点击事件时是不显示的，无法拿到子组件里的一些数据，也无法对子组件里的表格进行默认选中操作（ps:这里说一下，可能是我太菜了，没有实现，如果有实现了的小伙伴也可以交流交流）。我首次做的尝试是在父组件中获取需要选中行的id，然后将id传给子组件并在mouted周期里使用$nextTick()方法进行渲染，但是结果失败了。

实现代码:

//注意一定要绑定open方法

handleOpen() {
    this.$nextTick(() => {
        //defaultRolesID,需要选中的id，roleTable表格数据
        this.defaultRolesID.forEach((id) => {
            this.roleTable.forEach((row) => {
                if (row.rid === id) {
                    this.$refs.roleTable.toggleRowSelection(row, true);
                }
            });
        });
    });
},

我不会做动图，就放弃这一块儿的效果展示了。

4. 总结

​ 这阵子接触到el-table组件里的一些复杂的使用方法，全选框、默认选中、单元格样式改变之类的，以后还会用到，特意记录一下。