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

相关推荐
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
喜欢敲代码的程序员19 小时前
SpringBoot+Mybatis+MySQL+Vue+ElementUI前后端分离版:项目搭建(一)
spring boot·mysql·elementui·vue·mybatis
华子w90892585919 小时前
基于 SpringBoot+Vue.js+ElementUI 的 “花开富贵“ 花园管理系统设计与实现7000字论文
vue.js·spring boot·elementui
hackchen1 天前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
蓝胖子的多啦A梦1 天前
Vue+element 日期时间组件选择器精确到分钟,禁止选秒的配置
前端·javascript·vue.js·elementui·时间选选择器·样式修改
夏天想1 天前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
海天胜景1 天前
vue3 el-table 列增加 自定义排序逻辑
javascript·vue.js·elementui
满楼、11 天前
el-cascader 设置可以手动输入也可以下拉选择
javascript·vue.js·elementui
海天胜景11 天前
vue3 el-table 根据字段值 改变整行字体颜色
javascript·vue.js·elementui
资深柠檬精11 天前
报错 @import “~element-ui/packages/theme-chalk/src/index“;
前端·elementui