el-table使用插槽直接修改列元素样式

序言

起源

table表格

当引入element-ui时再使用table表格就感觉非常的不匹配,所以我们可以使用官方组件el-table

正文

插槽

在官方文档里的表格样式是这样

<template>
  <el-table
    :data="tableData"
    border
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    }
  }
</script>

但是要定义某一行或某一列的样式会发现很麻烦

首先要在

<el-table
    :data="tableData"
    border
    style="width: 100%">

写入

:cell-class-name="columnbackgroundStyle

再在js写入

columnbackgroundStyle({ row, column, rowIndex, columnIndex }) {
    if (columnIndex == 1) {
    	//让下标为1的列数背景颜色显示为红色（颜色自定义根据大家需求来）
        return 'background:red;'
    }
},

才能控制这个插槽的背景色,如果直接返回样式名会发现只能写在本页面的style中,写在外部引入样式中不展示样式

如果我们使用插槽

<el-table ref="ref_table" border v-loading="tableLoading" :data="tableList" :max-height="tableHeight"
              class="m-table-item" style="width: 600px;  margin-top: 40px; height: 100%; position: absolute ">
              <el-table-column align="center" label="居民类别" >
                <template slot-scope="{row}">
                  <span style="opacity: 0.5;">{{ row.residentCategoryName }}</span>
                </template>
              </el-table-column>
            </el-table>

可以直接在{{ row.residentCategoryName }}定义样式,避免了重复代码

结尾

官方文档:https://element.eleme.cn/