若依框架在el-dialog弹窗中增加el-tabs标签

最新推荐文章于 2025-09-11 04:14:22 发布

原创最新推荐文章于 2025-09-11 04:14:22 发布 · 840 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #elementui #javascript

在el-dialog弹窗中要加入过多的内容时可以在弹窗中加入标签页

<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
  <el-form ref="form" :model="form" :rules="rules" label-width="100px">
    <el-tabs v-model="activeName" @tab-click="">
      <el-tab-pane label="标签1" name="first" style="padding-left: 16px;">
          <el-col :span="12">
            <el-form-item label="名字" prop="Name">
              <el-input v-model="form.fileName" placeholder="请输入名字" />
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="form.fileNo" placeholder="请输入年龄" />
            </el-form-item>
          </el-col>
      </el-tab-pane>
      <el-tab-pane label="标签2" name="second" style="padding-left: 16px;">
        <el-table
          :data=data
          @selection-change=""
          ref="singleSelectTable">
          <el-table-column property="itemName" label="名称" ></el-table-column>
          <el-table-column property="methodName2" label="方法1" ></el-table-column>
          <el-table-column property="methodName2" label="方法2" ></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button type="primary" @click="submitForm">确 定</el-button>
    <el-button @click="cancel">取 消</el-button>
  </div>
</el-dialog>

关于el-tabs注意的点直接看官方文档：

Element - The world's most popular Vue UI framework

效果图