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

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

相关推荐
我在北京coding7 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
布兰妮甜2 天前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
鱼 空2 天前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
ruanhongbiao2 天前
饿了么el-upload上传组件报错:TypeError: ***.upload.addEventListener is not a function
javascript·elementui
Rainbow_Pearl2 天前
Vue2_element 表头查询功能
javascript·vue.js·elementui
布兰妮甜3 天前
开发在线商店:基于Vue2+ElementUI的电商平台前端实践
前端·javascript·elementui·vue
木依3 天前
Vue3 Element plus table有fixed列时错行
javascript·vue.js·elementui
我爱加班、、3 天前
element-plus表单校验失败问题
前端·javascript·vue.js·elementui·ecmascript
海天胜景8 天前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
海天胜景8 天前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui