項(xiàng)目中使用到element-ui組件庫(kù)，這里簡(jiǎn)單整理下常用的操作，如果有類似的功能可以做一個(gè)參考
具體的方法建議閱讀官網(wǎng)-table章節(jié)：

文檔

table-column-scoped-slot 文檔

自定義列的內(nèi)容

需求：添加操作按鈕

通過(guò)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)來(lái)的操作按鈕可以通過(guò)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)前屬性值

通過(guò)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>

可以通過(guò)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>

編寫(xiě)styleColor樣式，設(shè)置字體顏色

.styleColor{
    color:red;
 }

設(shè)置樣式

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

說(shuō)明：表頭單元格的 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è)置樣式
>

編寫(xiě)headerStyle，返回class名稱tableStyle

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

---------------
//設(shè)置樣式
<style>
  .tableStyle{
    background:#F5F7FA;
    font-weight:400;
  }
</style>

header-cell-style （表頭thead）

說(shuō)明：表頭單元格的 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'
>

編寫(xiě)tableHeaderStyle方法，返回樣式

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