如果遇到技术需求是 改指定行 或指定列 亦或者 指定单元格 的样式,可以通过以下方式实现
例如,要求表格第一列 ,左内边距 40px
通过设置 el-table的 cell-style、header-cell-style 实现,element 官网 有如下介绍
首先,首先先写好回调方法,因为在项目的 多个地方会用到这个逻辑,所以,我将这个函数放到js文件中,
用 混合 (mixins) 去分发 (mixins的用法可以自己去了解下)
个人理解 mixins
就是定义一部分公共的方法或者计算属性,然后混入到各个组件中使用,可以方便管理与统一修改
export default {
methods: {
// 单元格的 style 的回调方法
cellStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0) {
return `padding-left:40px;`;
} else {
return ''
}
},
// 表头行的 style 的回调方法
headCellStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 0 && rowIndex === 0) {
return `padding-left:40px;`;
} else {
return ''
}
},
}
}
第二步,写好了回调方法之后 ,就可以在vue组件里面使用 了
import ListMixin from "../../assets/js/listMixins";
import TableMixin from "../../assets/js/tableMixins";
mixins: [ListMixin, TableMixin],
第三步,在el-table 调用即可:
这样就实现了 指定第一列的 的左边距40px的要求。
如果您是需要改某指定单元格,比如 第五行 ,第六列 单元格的样式,道理相同,对应改rowIndex 和 columnIndex 这两个值即可。
// 单元格的 style 的回调方法
cellStyle({ row, column, rowIndex, columnIndex }) {
if (columnIndex === 6 && rowIndex === 5) {
return `padding-left:40px;`;
} else {
return ''
}
},
全文结束,全文作为记录而写,也希望能帮到看到此文的您,若有不恰当之处,欢迎指正!