组件
<template>
<el-descriptions :column="column" :colon="false" border>
<el-descriptions-item
v-for="item in list"
:key="item.label"
:span="item.span"
:label="item.label"
>
<template v-if="item.slot">
<slot :name="item.slot" :item="item" :data="data" />
</template>
<template v-else> {{ data[item.field] }} </template>
</el-descriptions-item>
</el-descriptions>
</template>
<script>
export default {
name: "Description",
props: {
column: { type: Number, default: 3 },
list: { type: Array, default: () => [] },
data: { type: Object, default: () => ({}) },
},
};
</script>
使用
<Description :list="list" :data="info">
<template #status="{ data }">
<StatusPoint
:color="statusColor[data.status]"
:text="data.statusLabel"
/>
</template>
</Description>
我发现这样不就成了类似jsx 的写法了吗 ！！！ 我写了这么久vue 忽然才想到
