avue-crud 中给表格中其中一列修改样式

cell-style

我们查看avue的文档 发现cell-class-name 可以帮我们修改样式，但不知道为什么，我这里样式加不上，然后我就用了 :cell-style="cellStyle"的方法。它跟cell-class-name 一样 带着四个参数({row,column,rowIndex,columnIndex})=>{}

我们通过columnIndex的值，来控制我们想改变样式的那一列

  <avue-crud ref="crud" v-model="form" :page.sync="page" :data="tableData" :table-loading="tableLoading"
          :option="tableOption" :permission="permissionList" @search-change="searchChange"
          @refresh-change="refreshChange" @size-change="sizeChange" @current-change="currentChange"
          @row-del="handleDelete" @row-update="update" @row-save="create" :cell-style="cellStyle">


 cellStyle({ row, column, rowIndex, columnIndex }) {
        if (columnIndex == 1) {
          console.log(11112);
          return {
            paddingLeft: "50px"
          }
        } else if (columnIndex == 3) {
          return {
            paddingLeft: "30px"
          }
        } else if (columnIndex == 2) {
          return {
            paddingLeft: "60px"
          }
        }
      },

这样我们就可以给任意一列改变颜色和字体大小了。

如何你想改变表头的样式 我这有最简单的方法，直接:nth-child(）用伪类来找到它。

 .menu /deep/ .el-table__header-wrapper th:nth-child(2) .cell {

    margin-left: 50px;
  }

这里最好是用个div包起来，如果你同一个页面中还有其他表单弹窗功能，那么这里面的表单也会被样式所影响，修改.el-table__header-wrappe 最好给他一个范围。