循环tab且下面的数据(修改)不相互影响

需求： 接口获取数据，新项目进来接口没有数据data:[]，页面则默认展示一个，否则按照data展示，多个tab切换时，修改tab下的数据，其他tab页面不受影响；

页面样式：

代码：

 try{
        let params = {
          evaluationId: this.processInfo ? this.processInfo.evaluationId : "1",
        }
        const res = await ajax.ajaxMethodWidthParams('api/tEvaluationPwduses/getEvaluationPwdUseList',
          'POST', params, type)
          this.isSpinShow = false;
          if (res.status == 200) {
              if(res.data.length==0){
                for(let i=0;i<this.evaluationtInformationList.length;i++){
                  this.saveData.push({
                    label:this.evaluationtInformationList[i].label,
                    evaluationInformationId:this.evaluationtInformationList[i].value,
                    environmentDetail:'',
                    networkDetail:'',
                    deviceDetail:'',
                    appdataDetail:'',
                    evaluationId: this.processInfo.evaluationId,
                    state:1,
                  })
                }
                console.log(this.saveData,'saveData')
              }else {
                this.saveData = res.data;
                for(let i=0;i<this.evaluationtInformationList.length;i++){
                  this.saveData[i].label=this.evaluationtInformationList[i].label
                }
              }
        }
      }catch(e){}

整体代码：

<template>
  <section>
    <Spin fix v-show="isSpinShow">
      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
      <div>Loading...</div>
    </Spin>
    <Row>
      <Form  :label-width="0" ref="networkStructure" >
      <Col span="24">
        <Card dis-hover>
          <Tabs type="card" @on-click="changeTab_1" :animated="false" ref="networkStructure">
            <TabPane v-for="(item, i) in saveData" :key="i" :label="item.label" :name="item.value">
                    <p class="text1">1、物理和环境安全密码应用情况</p>
                    <textarea required name="" id=""  class="textarea-inherit" v-model="item.environmentDetail"></textarea>

                    <p class="text1">2、网络和通信安全密码应用情况</p>
                    <textarea required name="" id="" class="textarea-inherit" v-model="item.networkDetail"></textarea>

                    <p class="text1">3、设备和计算安全密码应用情况</p>
                    <textarea required name="" id="" class="textarea-inherit" v-model="item.deviceDetail"></textarea>

                    <p class="text1">4、应用和数据安全密码应用情况</p>
                    <textarea required name="" id="" class="textarea-inherit" v-model="item.appdataDetail"></textarea>
            </TabPane>
          </Tabs>
        </Card>
      </Col>
      </Form >
    </Row>
  </section>
</template>

<script>
import ajax from "../../../../tool/ajax";
import Util from "@/libs/util.js";
import { mapState, mapActions } from "vuex";

export default {
  name: "networkStructure",
  props: ["currentNodeKey"],
  inject: ["processInfo"],

  data() {
    return {
      isReview: localStorage.roleNames === 'xmjl' || localStorage.roleNames === 'ld' || this.processInfo.node == '11' ? true : false,
      ty:0,
      isSpinShow: false,
      temp: undefined,
      evaluationId: "",
      // evaluationInformationId: "",
      tempIndex: undefined,
      saveData: [],
      columns:null,
      networkStructure: {},
      sexId:'', // 被测系统id
    };
  },
  computed: {
    ...mapState({
        evaluationtInformationList: state => state.isopreservation.evaluationtInformationList,
    }),
  },
  methods: {
    ...mapActions(['isopreservation/getEvaluationtInformationList']),
    init() {
      this.initData();
      this.tempIndex = null
    },
    async initData() {
      console.log(this.evaluationtInformationList,'this.evaluationtInformationList')
      this.isSpinShow = true;
      let type;
      if (this.isoForClient) type = "sd_clientSurvey";
      else type = "sd_secret";
      // 被测系统id
      await this['isopreservation/getEvaluationtInformationList']({
          evaluationId: this.processInfo.evaluationId,
           params: this.isoForClient
        })
        this.columns=this.evaluationtInformationList
      // 获取接口信息，渲染页面
      try{
        let params = {
          evaluationId: this.processInfo ? this.processInfo.evaluationId : "1",
        }
        const res = await ajax.ajaxMethodWidthParams('api/tEvaluationPwduses/getEvaluationPwdUseList',
          'POST', params, type)
          this.isSpinShow = false;
          if (res.status == 200) {
              if(res.data.length==0){
                for(let i=0;i<this.evaluationtInformationList.length;i++){
                  this.saveData.push({
                    label:this.evaluationtInformationList[i].label,
                    evaluationInformationId:this.evaluationtInformationList[i].value,
                    environmentDetail:'',
                    networkDetail:'',
                    deviceDetail:'',
                    appdataDetail:'',
                    evaluationId: this.processInfo.evaluationId,
                    state:1,
                  })
                }
                console.log(this.saveData,'saveData')
              }else {
                this.saveData = res.data;
                for(let i=0;i<this.evaluationtInformationList.length;i++){
                  this.saveData[i].label=this.evaluationtInformationList[i].label
                }
              }
        }
      }catch(e){}
    },
    //获取当前选中值id
    changeTab_1:function(value){
     this.sexId=value
      console.log(value);
    },
    
    // 数据保存成功
    async getFormData() {
      // evaluationPwduseId  是修改的时候要，新增的时候由后端生成的
      let flag = false
      for (let index = 0; index < this.saveData.length; index++) {
        if(this.saveData[index].appdataDetail=='' || this.saveData[index].deviceDetail=='' 
        || this.saveData[index].networkDetail=='' || this.saveData[index].environmentDetail ==''){
          this.$Message.error('请仔细检查是否有未填项')
          flag = false
          console.log('空');
          return 
         
        }else{
          flag = true
        }
      }
      console.log(flag);
      if(flag){
        try {
            const res = await ajax.ajaxMethodWidthParams('api/tEvaluationPwduses/addEvaluationPwduse', 'POST',
              this.saveData, 'sd_secret')
              console.log(this.saveData,'@@');
            if (res.status == 200) {
              this.loading = false
              this.$Message.success('保存成功')
              flag = true
            } else {
              this.loading = false
              flag = false
              this.$Message.error('保存失败')
            }
          } catch (e) {
            this.$Message.error('保存数据失败')
          }
          return flag;
        
      }
       
      
    },
  },
  created() {
    this.evaluationId = this.processInfo ? this.processInfo.evaluationId : "";
    this.init();
  },
};
</script>

<style>
.text1{
  font-size:18px;
  line-height:44px;
}
.textarea-inherit{
  width: 100%;
  /* overflow: auto; */
  word-break: break-all;
  /* 解决兼容性问题 */
  min-height:100px;
  font-size:16px;
  line-height:26px;
}
</style>

如有不足，请指出，谢谢大家！