项目中使用到element-ui组件库，这里简单整理下常用的操作，如果有类似的功能可以做一个参考
具体的方法建议阅读官网-table章节：
文档
自定义列的内容
需求：添加操作按钮
通过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;'
}
