element ui中el-tabs 标签页使用技巧

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

当我们使用el-tabs不要按照固化的思路去写每一页的具体内容,可以通过放在el-tabs外部,相同内容,来让代码更简洁

---

提示：以下是本篇文章代码，下面案例可供参考

二、代码如下（示例）：

 <el-tabs
      v-model="formData.type"
      @tab-click="onSubmit"
    >
      <el-tab-pane label="前部" name="1"> </el-tab-pane>
      <el-tab-pane label="后部" name="2"> </el-tab-pane>
      <el-tab-pane label="左部" name="3"> </el-tab-pane>
      <el-tab-pane label="右部" name="4"> </el-tab-pane>
      <el-tab-pane label="中部" name="5"> </el-tab-pane>
      <el-tab-pane label="毛囊" name="6"> </el-tab-pane>
    </el-tabs>

    <el-image
      v-for="(item, key) in personPhotos"
      :key="key"
      :src="item"
      :preview-src-list="[item]"
    ></el-image>

---

export default {
  name: "headRecord",
  components: {},
  props: {
    guestId: {
      type: Number,
    },
  },
  data() {
    return {
      timeRange: [],
      formData: {
        type: "1",
      },
      personPhotos: [],
    };
  },

总结

提示：这里简单的介绍了一个el-tabs的使用技巧,希望大家可以少走弯路,