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 = [ item. id] } ,