element步骤条＜el-steps＞使用具名插槽自定义

element步骤条使用具名插槽自定义

步骤条使用具名插槽:

<el-steps direction="vertical" :active="1"><el-step><template slot="description">//在此处可以写你的插槽内容</template>/el-step>
</el-steps>

步骤条垂直：direction=“vertical”
步骤条当前步骤：:active=“1”
具名插槽：slot=“description”

示例

以下示例是在插槽里添加表格

<template><div class="app-container"><el-steps direction="vertical" :active="1"><el-stepstyle="width:800px":title="item.name"v-for="(item, key) in testData":key="key"><template slot="description"><div><span>步骤条插槽测试：</span><div><el-tableborderstyle="width:500px":data="item.list":header-cell-style="{ 'text-align': 'center' }":cell-style="{ 'text-align': 'center' }"><el-table-columnlabel="姓名"prop="name":show-overflow-tooltip="true"/><el-table-columnlabel="性别"prop="sex":show-overflow-tooltip="true"/><el-table-columnlabel="手机号"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>