element步骤条使用具名插槽自定义
步骤条使用具名插槽:
html
<el-steps direction="vertical" :active="1">
<el-step>
<template slot="description">
//在此处可以写你的插槽内容
</template>
/el-step>
</el-steps>
步骤条垂直:direction="vertical"
步骤条当前步骤::active="1"
具名插槽:slot="description"
示例
以下示例是在插槽里添加表格
html
<template>
<div class="app-container">
<el-steps direction="vertical" :active="1">
<el-step
style="width:800px"
:title="item.name"
v-for="(item, key) in testData"
:key="key"
>
<template slot="description">
<div>
<span>步骤条插槽测试:</span>
<div>
<el-table
border
style="width:500px"
:data="item.list"
:header-cell-style="{ 'text-align': 'center' }"
:cell-style="{ 'text-align': 'center' }"
>
<el-table-column
label="姓名"
prop="name"
:show-overflow-tooltip="true"
/>
<el-table-column
label="性别"
prop="sex"
:show-overflow-tooltip="true"
/>
<el-table-column
label="手机号"
prop="phone"
:show-overflow-tooltip="true"
/>
</el-table>
</div>
</div>
</template>
</el-step>
</el-steps>
</div>
</template>
<script>
export default {
data() {
return {
testData: {
taleData1: {
name: "表格一",
list: [
{
name: "小明",
sex: "男",
phone: "18355327777",
},
],
},
taleData2: {
name: "表格二",
list: [
{
name: "小红",
sex: "女",
phone: "18355328888",
},
],
},
taleData3: {
name: "表格一",
list: [
{
name: "小明",
sex: "男",
phone: "18355327777",
},
],
},
}
};
},
};
</script>
实现效果如下:
参考:https://blog.csdn.net/weixin_46713508/article/details/131344465