序言
起源
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/