Element-UI 之 el-table表格插槽、表头样式、内容居中

html 部分，使用 slot-scope插槽 

<el-table :data="tableData" border :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
      <el-table-column prop="date" label="日期" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="address" label="地址" />
      <el-table-column prop="status" label="状态" width="120">
        <!-- 插槽 -->
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1">标签一</el-tag>
          <el-tag v-if="scope.row.status == 2" type="success">标签二</el-tag>
          <el-tag v-if="scope.row.status == 3" type="info">标签三</el-tag>
          <el-tag v-if="scope.row.status == 4" type="warning">标签四</el-tag>
          <el-tag v-if="scope.row.status == 5" type="danger">标签五</el-tag>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="240">
        <template slot-scope="scope">
          <el-button type="text" @click="handleClickGet(scope.row)">查看</el-button>
          <el-button type="text" @click="handleClickEdit(scope.row)">编辑</el-button>
          <el-button type="text" @click="handleClickDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

js部分 

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 1518 弄', status: 1 },
        { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', status: 2 },
        { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄', status: 3 },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', status: 4 },
        { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄', status: 5 }
      ]
    }
  },
  methods: {
    // 查看
    handleClickGet(val) {
      console.log(val);
    },
    // 编辑
    handleClickEdit(val) {
      console.log(val);
    },
    // 删除
    handleClickDel(val) {
      console.log(val);
    },
  },
  mounted() {
  },
  created() { }
}
</script>

css部分，全局elementui的el-table内容居中样式 

<style lang="scss" >
// element-ui 表格内容居中
.el-table__cell {
  text-align: center !important;
}
</style>

:header-cell-style="{ background: '#eef1f6', color: '#606266' }" 

设置表头背景颜色、文字颜色