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

相关推荐
花花鱼4 小时前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
落魄小二6 小时前
el-table 表格索引不展示问题
javascript·vue.js·elementui
别拿曾经看以后~10 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
lfl183261621601 天前
el-date-picker 设置开始时间和结束时间
前端·vue.js·elementui
牛先森家的牛奶1 天前
elementui中的新增弹窗在新增数据成功后再新增 发现数据无法清除解决方法
前端·javascript·elementui
dy17172 天前
el-date-picker日期选择器动态设置日期
前端·vue.js·elementui
卡布叻_星星2 天前
同一个页面击穿element样式后,会影响同样组件的使用
前端·vue.js·elementui
加油小吃货2 天前
定义全局键盘监听事件,el-dialog中删除不可用
javascript·vue.js·elementui
梅子酱~3 天前
Vue 学习随笔系列十三 -- ElementUI 表格合并单元格
vue.js·学习·elementui
涔溪3 天前
监听el-table中 自定义封装的某个组件的值发现改变调用函数
前端·vue.js·elementui