Element-UI中table的样式设置

项目中使用到element-ui组件库，这里简单整理下常用的操作，如果有类似的功能可以做一个参考
具体的方法建议阅读官网-table章节：

文档

table-column-scoped-slot 文档

自定义列的内容

---

需求：添加操作按钮

通过slot-scope="scope"添加操作按钮，这是专门为我们提供的插槽，方便自定义添加不同的内容。

scope.$ index 获取当前行下标

添加进来的操作按钮可以通过scope.$index可以获取当前行对应的下标

scope.row 获取当前属性值

通过scope.row.属性名可以获取当前行对应的属性值

可以通过scope.row.属性名和三目运算符给特殊的属性值设定样式

编写styleColor样式，设置字体颜色

.styleColor{
    color:red;
 }

---

设置样式

---

header-cell-class-name （表头thead）

说明：表头单元格的 className 的回调方法，也可以使用字符串为所有表头单元格设置一个固定的 className。
函数形式：将headerStyle方法传递给header-cell-class-name

编写headerStyle，返回class名称tableStyle

headerStyle ({row, column, rowIndex, columnIndex}) {
    return 'tableStyle'
}

---------------
//设置样式

header-cell-style （表头thead）

说明：表头单元格的 style 的回调方法，也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。
函数形式：将tableHeaderStyle方法传递给header-cell-style

编写tableHeaderStyle方法，返回样式

tableHeaderStyle ({row, column, rowIndex, columnIndex}) {
   return 'background-color:#1989fa;color:#fff;font-weight:400;'
}