自定义单元格样式
<el-table:cell-style="setSellStyle"></el-talbe>
用setSellStyle这个方法去控制<el-table的单元格样式
methods: {setSellStyle({row, column, rowIndex, columnIndex }) {if (column.label === '名称') {return "background:#e8e8e8;border: 1px solid #ffffff;borderRadius: 13px 0 0 5px;"}if (columnIndex === 4) {return "background:#e8e8e8;border: 1px solid #ffffff;borderRadius: 0 13px 5px 0"} else {return "background:#e8e8e8;border: 1px solid #ffffff;"}}
方法中可以传入行
,列
,行号
和列号
四个值
column.label
:例如我的第一列的表头叫名称,那就可以通过列的label来返回样式,
columnIndex
:我的列表一共有五列,列号是从0开始的,最后一列的编号就是4,通过列号来返回样式。
这里我改变了单元格的背景色,以及单元格边框样式
border-radius:
border-radius:2px;
等价于↓
border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;
border-radius:13px 0 0 5px;
等价于↓
border-top-left-radius:13px;border-top-right-radius:0;border-bottom-right-radius:0;border-bottom-left-radius:5px;
填写像素的值顺序为:左上↖、右上↗、右下↘、左下↙ 。刚好从左上开始顺时针一圈
————————————————————————————