最近在弄字典,有用到树但是原生的头部不对齐。强迫症表示很难受
所以看了下样式 当没有展开框时候用的是另一种样式,这样改起来也挺简单的
定义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>
最后结果完美