項(xiàng)目中使用到element-ui組件庫苛吱，這里簡(jiǎn)單整理下常用的操作煮寡，如果有類似的功能可以做一個(gè)參考
具體的方法建議閱讀官網(wǎng)-table章節(jié)：
文檔
自定義列的內(nèi)容
需求：添加操作按鈕
通過slot-scope="scope"添加操作按鈕兄裂，這是專門為我們提供的插槽脑慧，方便自定義添加不同的內(nèi)容枣察。
<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 獲取當(dāng)前行下標(biāo)
添加進(jìn)來的操作按鈕可以通過scope.$index可以獲取當(dāng)前行對(duì)應(yīng)的下標(biāo)
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain @click = "showIndex(scope.$index)">點(diǎn)擊顯示當(dāng)前行下標(biāo)</el-button>
</template>
</el-table-column>
scope.row 獲取當(dāng)前屬性值
通過scope.row.屬性名可以獲取當(dāng)前行對(duì)應(yīng)的屬性值
<el-table-column label="操作" width="160">
<template slot-scope="scope">
<el-button size="mini" type="primary" plain @click = "showName(scope.row.name)">點(diǎn)擊獲取姓名屬性</el-button>
</template>
</el-table-column>
可以通過scope.row.屬性名和三目運(yùn)算符給特殊的屬性值設(shè)定樣式
<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樣式争占，設(shè)置字體顏色
.styleColor{
color:red;
}
設(shè)置樣式
header-cell-class-name （表頭thead）
說明：表頭單元格的 className 的回調(diào)方法燃逻，也可以使用字符串為所有表頭單元格設(shè)置一個(gè)固定的 className。
函數(shù)形式：將headerStyle方法傳遞給header-cell-class-name
<el-table
:data="tableData"
class="table"
stripe //斑馬紋
border //邊框
:header-cell-class-name="headerStyle" // 設(shè)置樣式
>
編寫headerStyle臂痕，返回class名稱tableStyle
headerStyle ({row, column, rowIndex, columnIndex}) {
return 'tableStyle'
}
---------------
//設(shè)置樣式
<style>
.tableStyle{
background:#F5F7FA;
font-weight:400;
}
</style>
header-cell-style （表頭thead）
說明：表頭單元格的 style 的回調(diào)方法伯襟，也可以使用一個(gè)固定的 Object 為所有表頭單元格設(shè)置一樣的 Style。
函數(shù)形式：將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;'
}
