avue-curd 不同列设置不同的对齐方式

最新推荐文章于 2024-08-23 11:07:06 发布

金乌Y

最新推荐文章于 2024-08-23 11:07:06 发布

阅读量724

点赞数

分类专栏： avueui 文章标签：前端 css

本文链接：https://blog.csdn.net/qq_44170108/article/details/128529154

版权

avueui 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

:cell-class-name="addCellClass"
:header-cell-class-name="addCellClass"

可以通过指定组件的 row-class-name 属性来为 crud 中的某一行添加 class，表明该行处于某种状态,返回当前行的row数据和行的序号index;

header-cell-class-name 表头单元格的className的回调方法，也可以使用字符串为所有表头单元格设置一个固定的className

<template>
  <div class="tableCrudBox">
    <avue-crud
      ref="tableCrudDialog"
      class="tableCrud"
      :data="tableData"
      :option="tableOptions"
      :table-loading="showLoading"
      :cell-class-name="addCellClass"
      :header-cell-class-name="addCellClass"
    >
    </avue-crud>
  </div>
</template>

    methods: {
      addCellClass({ row, column }) {
        // 'aaa','bbb'为列的 prop
        const leftArr = ['aaa','bbb'], rightArr = ['ccc','ddd'], centerArr = ['eee','fff']
        if (leftArr.includes(column.property)) {
          return 'cell-left'
        } else if (rightArr.includes(column.property)) {
          return 'cell-right'
        } else if (centerArr.includes(column.property)) {
          return 'cell-center'
        }
      }
    }

通过addCellClass()方法为表格的头和行添加了指定的class，接下来为指定类设置样式：

<style lang="scss" scoped>
.tableCrudBox{
  .tableCrud{
    // 表头样式
    /deep/ .el-table th.el-table__cell.is-leaf.cell-left {
      text-align: left;
    }
    /deep/ .el-table th.el-table__cell.is-leaf.cell-right {
      text-align: right;
    }
    /deep/ .el-table th.el-table__cell.is-leaf.cell-center {
      text-align: center;
    }
    // 表格行样式
    /deep/ .el-table td.el-table__cell.cell-left {
      text-align: left;
    }
    /deep/ .el-table td.el-table__cell.cell-right {
      text-align: right;
    }
    /deep/ .el-table td.el-table__cell.cell-center {
      text-align: center;
    }
  }
}

</style>