element表格固定某一行_element table改指定行、列或单元格的样式

如果遇到技术需求是 改指定行 或指定列 亦或者 指定单元格 的样式，可以通过以下方式实现

例如，要求表格第一列 ，左内边距 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 ''

}

},复制代码

全文结束，全文作为记录而写，也希望能帮到看到此文的您，若有不恰当之处，欢迎指正！