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

2023-12-25 17:34:31

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-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

文章来源:https://blog.csdn.net/weixin_42949219/article/details/135202899
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。