【VUE】element Table指定字段单元格样式及数据格式化

【VUE】element Table指定字段单元格样式及数据格式化_第1张图片

将列表中的指定字段的数据,根据字典值回显,并修改指定状态的显示样式

	
				

 

// 列信息
			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;
	}

你可能感兴趣的:(vue.js,前端,javascript)