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

相关推荐
wangbing11253 小时前
界面规范11-对话框
javascript·vue.js·elementui
Hexene...2 天前
【前端Vue】el-dialog关闭后黑色遮罩依然存在如何解决?
前端·javascript·vue.js·elementui·前端框架
fury_1233 天前
vue3:触发自动el-input输入框焦点
javascript·vue.js·elementui
小菜全3 天前
ElementUI 组件概览
前端·vue.js·elementui
今天不要写bug3 天前
基于elementUI实现一个可编辑的表格(简洁版)
前端·javascript·elementui
前端 贾公子4 天前
ElementUI 中 validateField 对部分表单字段数组进行校验时多次回调问题
前端·javascript·elementui
棒棒的唐4 天前
vue2 elementUI 登录页面实现回车提交登录的方法
前端·javascript·elementui
赵得C5 天前
【前端技巧】Element Table 列标题如何优雅添加 Tooltip 提示?
前端·elementui·vue·table组件
小菜全5 天前
uniapp基础组件概述
前端·css·vue.js·elementui·css3
浩星5 天前
iframe引入界面有el-date-picker日期框,点击出现闪退问题处理
前端·vue.js·elementui