el-table tree类型对齐问题

最新推荐文章于 2024-05-23 23:47:46 发布

王者之座

最新推荐文章于 2024-05-23 23:47:46 发布

阅读量2.2k

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/oTianKongLan123/article/details/118025478

版权

最近在弄字典，有用到树但是原生的头部不对齐。强迫症表示很难受

所以看了下样式当没有展开框时候用的是另一种样式，这样改起来也挺简单的

定义el_table的class为sysDictInfoTable 然后控制其下面的el-table__placeholder 全部padding-left：19px

.sysDictInfoTable .el-table__placeholder{
  padding-left: 19px;
}

table代码为

<el-table
      :data="dataList"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      v-loading="dataListLoading"
      class="sysDictInfoTable"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      type="selection"
      header-align="center"
      align="center"
      width="50">
      </el-table-column>
      <el-table-column
        prop="extraField.sdiName"
        header-align="center"
        align="left"
        label="字典名称">
      </el-table-column>
      <el-table-column
        prop="extraField.sdiCode"
        header-align="center"
        align="center"
        label="字典编码">
      </el-table-column>
      <el-table-column
        prop="parentId"
        header-align="center"
        align="center"
        label="父节点id">
      </el-table-column>
      <el-table-column
        prop="extraField.enable"
        header-align="center"
        :formatter="(row, column) => dictChange(row, column, 'yesNoOptions')"
        align="center"
        label="是否启用">
      </el-table-column>
      <el-table-column
        prop="extraField.sort"
        header-align="center"
        align="center"
        label="排序">
      </el-table-column>
      <el-table-column
        prop="extraField.createTime"
        header-align="center"
        align="center"
        label="创建时间">
      </el-table-column>
      <el-table-column
        fixed="right"
        header-align="center"
        align="center"
        width="150"
        label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
  </el-table>

最后结果完美