Element-UI中table的样式设置

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

文档

table-column-scoped-slot 文档

自定义列的内容

---

需求：添加操作按钮

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

<el-table-column>
    <template slot-scope="scope">
        <el-button size="mini" type="primary">编辑</el-button>
        <el-button size="mini" type="danger">删除</el-button>
    </template>
</el-table-column>

scope.$ index 获取当前行下标

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

<el-table-column label="操作" width="160">
    <template slot-scope="scope">
        <el-button size="mini" type="primary" plain @click = "showIndex(scope.$index)">点击显示当前行下标</el-button>
    </template>
</el-table-column>

scope.row 获取当前属性值

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

<el-table-column label="操作" width="160">
    <template slot-scope="scope">
        <el-button size="mini" type="primary" plain @click = "showName(scope.row.name)">点击获取姓名属性</el-button>
    </template>
</el-table-column>

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

<el-table-column prop="name" :label="langConfig.table.name[lang]" width="200">
    <template slot-scope="scope">
        <div :class="scope.row.name === '王大虎' ? 'styleColor':''">{{scope.row.name}}</div>
    </template>
</el-table-column>

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

.styleColor{
    color:red;
 }

---

设置样式

---

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

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

<el-table 
    :data="tableData" 
    class="table" 
    stripe          //斑马纹
    border          //边框
    :header-cell-class-name="headerStyle"   // 设置样式
>

编写headerStyle，返回class名称tableStyle

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

---------------
//设置样式
<style>
  .tableStyle{
    background:#F5F7FA;
    font-weight:400;
  }
</style>

header-cell-style （表头thead）

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

<el-table 
    :data="tableData[lang]" 
    class="table" 
    stripe 
    border 
    :header-cell-style='tableHeaderStyle'
>

编写tableHeaderStyle方法，返回样式

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