[JavaScript知识库]动态展示el-tabs且内容为不同的el-checkbox

需求：动态的el-tabs，每个的内容都是el-checkbox且不同，最后按保存按钮能得到每一个tabs和对应勾选的多选框内容。

结果：

?步骤：

1.父组件是el-tabs，子组件是el-checkbox，作为el-tab-pane的内容。

父组件的html

<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="(item, index) in allTitle"
        :key="index"
        :label="item.name"
      >
        <childRadio
          :options="item.option"
          :name="item.name"
          @saveListData="saveListData"
        ></childRadio>
      </el-tab-pane>
    </el-tabs>
    <el-button @click="saveHandel()">保存</el-button>
  </div>
</template>

2.父组件的js

<script>
import childRadio from "./elTabsChildRadio.vue";
export default {
  data() {
    return {
      activeName: "first",
      saveArr: [],
      result: [],
      allTitle: [
        { name: "学校", option: ["学生", "教师"] },
        { name: "医院", option: ["医生", "护士", "病人"] },
        { name: "餐厅", option: ["厨师", "服务员"] },
        { name: "机场", option: ["机长", "乘务员", "上帝"] },
      ],
    };
  },
  components: {
    childRadio,
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    saveHandel() {
      console.log(this.result);
    },
    saveListData(data) {
      this.saveArr.push(data);
      this.saveArr = this.saveArr.reverse();
      // 数组去重 按照name去重
      var result = [];
      var obj = {};
      for (var i = 0; i < this.saveArr.length; i++) {
        if (!obj[this.saveArr[i].name]) {
          result.push(this.saveArr[i]);
          obj[this.saveArr[i].name] = true;
        }
      }
      this.result = result;
    },
  },
};
</script>

在展示每一项的内容的时候，要利用组件传值将展示的多选框的内容传递到子组件中。

3.子组件的html和js

<template>
  <div>
    <el-checkbox-group v-model="checkList">
      <el-checkbox
        v-for="(item, index) in list"
        :key="index"
        :label="item"
      ></el-checkbox>
    </el-checkbox-group>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      checkList: [],
      saveArr: [],
    };
  },
  props: ["options", "name"],
  created() {
    this.list = this.options;
  },
  watch: {
    checkList(newValue) {
      let obj = {
        name: this.name,
        list: this.checkList,
      };
      this.$emit("saveListData", obj);
    },
  },
};
</script>

子组件中接收父组件传来的值，需要实时的监听绑定的model值。实时的将当前的obj发送回父组件。

4.父组件拿到obj

saveListData(data) {
      this.saveArr.push(data);
      this.saveArr = this.saveArr.reverse();
      // 数组去重 按照name去重
      var result = [];
      var obj = {};
      for (var i = 0; i < this.saveArr.length; i++) {
        if (!obj[this.saveArr[i].name]) {
          result.push(this.saveArr[i]);
          obj[this.saveArr[i].name] = true;
        }
      }
      this.result = result;
    },
  },

父组件拿到obj，推送到一个数组中，对数组按照name进行去重，上述去重的方法是保留第一个，我们需要保留相同的name的最后一个，所以去重之前需要将数组进行反转即可。

5.此时就可以拿到一个数组，数组中是四个对象，每一个对象有一个name是tabs的内容，还有一个list数组，是当前tabs所勾选的多选框的内容。