1.代码实现:
<el-descriptions :column="3" :contentStyle="CS" :label-style="LS" border class="margin-top"
direction="vertical" title="基础信息">
<el-descriptions-item>
<template slot="label">
<i class="el-icon-user-solid"/>
姓名
</template>
{{userInfo.userName||'暂无'}}
</el-descriptions-item>
...
</el-descriptions>
<script>
data() {
return {
CS: {
'text-align': 'center', //文本居中
'min-width': '250px', //最小宽度
'word-break': 'break-all' //过长时自动换行
},
LS: {
'color': '#000',
'text-align': 'center',
'font-weight': '600',
'height': '40px',
'background-color': 'rgba(255, 97, 2, 0.1)',
'min-width': '110px',
'word-break': 'keep-all'
},}}
</script>
2.效果如下: