element table表格树形数据展示

element table表格树形数据展示

1、效果

2、代码

 <el-table  ref="pointMultipleTable" border class="table-box" :data="[damActiveObj]"row-key="id" :tree-props="{ children: 'children' }" :expand-row-keys="expandRowKeys"><el-table-column v-for="column in columnAttrs" :key="column.prop" :label="column.label" :prop="column.prop":align="column.align || 'right'" :width="column.width" :show-overflow-tooltip="true"><template slot-scope="{ row }"><span v-if="column.prop === 'evaluateLevelNm'" :style="{color: colors[row['evaluateLevel']]}">{{ row[column.prop] }}</span><span v-else>{{ row[column.prop] }}</span></template></el-table-column></el-table>

const colors = {95: '#1EE36D', // 正常85: '#00F0FF', // 基本正常75: '#FFD600', // 轻度异常65: '#FF6B00', // 异常55: '#FF331D' // 极度异常
}data() {return {colors,columnAttrs: [{label: '指标名称',prop: 'quotaName'},{label: '综合权重',prop: 'quotaWeight',align: 'center'},{label: '最大隶属度',prop: 'evaluateMaxScore',align: 'right'},{label: '安全状态',prop: 'evaluateLevelNm',align: 'center'},{label: '分值',prop: 'evaluateScore',align: 'right'}],expandRowKeys: []}},

 handleSelectDam(item) {// this.expandRowKeys取前面1级this.expandRowKeys = [item.id]},