版权声明:本文为QQ帝国原创博客,转载请附上链接,谢谢。 https://blog.csdn.net/QQ_Empire/article/details/88845256
一、elementUi的tabel组件复选框控制禁止选择
<el-table-column
type="selection"
width="55"
:selectable='checkboxInit'>
</el-table-column>
//methods里
checkboxInit(row,index){
if (row.withdrawState==2)//这个判断根据你的情况而定
return 0;//不可勾选,或者是return false/true
else
return 1;//可勾选
}
二、过滤器(根据数据条件显示不同内容)
<el-table-column align='center' label="审批通过时间" >
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.date|Filter_date }}</span>
</template>
</el-table-column>
filters:{
Filter_date(val){
return val==1?"啊啊啊":(val==2?"对对对":"发发发")
}
},
三、表格样式
1、行样式 :row-style="tableRowStyle"
2、头部样式 :header-cell-style='tableHeaderColor'
<el-table :data="tableData" border
:height="tableHeight"
:row-style="tableRowStyle"
:header-cell-style='tableHeaderColor'
fit >
<el-table-column align='center' label="项目" >
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.date }}</span>
</template>
</el-table-column>
</el-table>
data () {
return {
tableHeaderColor: {
'background':'#3D8990',
'color':'#fff'
},
}
或 methods里
// 修改table header的背景色
tableHeaderColor({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return 'background-color: lightblue;color: #fff;font-weight: 500;'
}
},
// 修改table tr行的背景色
tableRowStyle({ row, rowIndex }) {
return 'background-color: pink'
},
3、改变字体样式
<el-table-column prop="isPass" label="是否通过">
<template scope="scope">
<span v-if="scope.row.isPass==='1'" style="color: green">审核通过</span>
<span v-else-if="scope.row.isPass==='2'">待审核</span>
<span v-else style="color: red">未通过</span>
</template>
</el-table-column>