Element Table changes the style of the specified row, column, or cell

For example, the first column of the table is required to have a 40px left inner margin

You can set the cell-style and header-cell-style of the el-table, as described below on element’s official website

First of all, write the callback method first, because this logic will be used in various parts of the project, so I put this method in a JS file and distribute it with mixins (the usage of mixins can be learned by yourself).

Personal understanding of mixins is to define some common methods or calculation properties and mix them into various components for easy management and unified modification

export default {
 
    methods: {
 
        // The cell's style callback method
        cellStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0) {
                return `padding-left:40px; `;
            } else {
                return ' '}},// the first line of the table style callback method
        headCellStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 0 && rowIndex === 0) {
                return `padding-left:40px; `;
            } else {
                return ' '}}}},Copy the code

Second, once the callback method is written, it can be used in the VUE component

import ListMixin from ".. /.. /assets/js/listMixins";
import TableMixin from ".. /.. /assets/js/tableMixins";
 
 
 mixins: [ListMixin, TableMixin],Copy the code

Step 3: Call from el-table:

This fulfills the requirement to specify a 40px left margin for the first column.

If you need to change the style of a specified cell, for example, row 5 or column 6, change the values of rowIndex and columnIndex.

     // The cell's style callback method
        cellStyle({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 6 && rowIndex === 5) {
                return `padding-left:40px; `;
            } else {
                return ' '}},Copy the code

The end of the full text, the full text as a record and write, also hope to help to see this article you, if there is inappropriate, welcome correction!