将列表中的指定字段的数据,根据字典值回显,并修改指定状态的显示样式
<el-tableref="table"height="500px":data="dataList"><template v-for="(item, index) in columns"><el-table-column:key="index":index="index":label="item.label"align="center":prop="item.code":show-overflow-tooltip="true"><template slot-scope="scope"><template v-if="item.render"><span><RenderDom:row="scope.row":index="index":render="item.render"/></span></template><template v-else-if="item.code === 'deviceCount'"><spanv-if="scope.row[item.code] === null || scope.row[item.code] === ''">-</span><buttonv-elseclass="deviceCountBtn"@click="handleDeviceCountBtn(scope.row)">{{ scope.row[item.code] }}</button></template><template v-else-if="item.code === 'status'"><div class="statusFlex"><div:class="['statusCircle',{ statusCirclePurple: scope.row[item.code] === '2' },{statusCircleGray:scope.row[item.code] === '1' ||scope.row[item.code] === '3' ||scope.row[item.code] === '4',},]"></div><span>{{selectDictLabel(dict.type.paas_orderStatus,scope.row[item.code])}}</span></div></template><template v-else><span>{{ scope.row[item.code] }}</span></template></template></el-table-column></template>
</el-table>
// 列信息columns: [{label: this.$t('paasOrder.status'),code: `status`,visible: true,width: '250px',},{label: this.$t('common.updatedBy'),code: `updatedBy`,visible: true,width: '220px',},{label: this.$t('common.updatedTime'),code: `updatedTime`,visible: true,width: '220px',},],
// 清除圆形下默认'-'.statusCircle::after {content: '';}.statusFlex {display: flex;justify-content: center;align-items: center;}.statusCircleGray {width: 13px;height: 13px;border-radius: 13px;background: #d8d8d8;margin-right: 6px;}.statusCirclePurple {width: 13px;height: 13px;border-radius: 13px;background: #4d5aa0;margin-right: 6px;}