vue-el-tabs一些常見坑

vue項目開發的tabs切換會有遇到一些坑。

常見的v-show的失效。還有正常兄弟組件傳值監聽不到值變化問題。

失效可以用v-if代替，但是v-if是沒有切換時候不會渲染組件。這就造成了正常兩個原有tab內組件不會按照常規的兄弟傳值來進行。

解決方案也很簡單，直接在mounted內賦值即可，要注意的是不要在created鈎子內，此時數據還沒加載完，也是會傳遞不上的。

參考代碼：父組件info.vue

<el-tabs type="card" v-model="activeName" ref="tabs" class="info-tab"> 
<el-tab-pane label="受理單" name="shoulidan" key="shoulidan">
      <customApply
        @showWorkOrderPage="showWorkOrderPage"
        :info="info"
      ></customApply>
    </el-tab-pane>
    <el-tab-pane
      v-if="activeName === 'gongdan'"
      label="工單"
      name="gongdan"
      key="gongdan"
    >
      <workOrderLog
        v-show="activeName === 'gongdan'"
        :info="info"
        :subobj="subobj"
      ></workOrderLog>
    </el-tab-pane>
  </el-tabs>

兄弟組件：提交前輸入tab1：

      <el-row v-if="this.form.busiTypeId == '2'">
        <el-col :span="10">
          <el-form-item label="投訴類型">
            <el-cascader
              v-model="form.complainType"
              :options="options"
              clearable
              @change="fnChangeOpt"
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>

onSubmit() {
      var obj = {
        sourceType: this.info.callType, // 電話來源ID0 入呼，1 外呼
        dialogId: this.info.dialogId, // 會話ID
        customId: this.info.customid, // 客戶ID - 第一次沒有  往后返回 id 后端是小寫 這里注意
        contactId: this.info.contactId, // 會話客戶信息ID
      };
      // let params = {};
      Object.assign(obj, this.form);
      this.$axios
        .post(this.$apis.ccweb.newDataSL.insertAcceptInfo, obj)
        .then((res) => {
          console.log(res);
          this.form.id = res.data.id;
          this.$emit("showWorkOrderPage", res.data);
        });
    },

接收回顯的兄弟組件：tab2

 <el-row class="overTab">
        <el-col :span="10">
          <el-form-item label="投訴類型">
            <el-cascader
              v-model="form.complainType"
              :options="workoptions"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="投訴等級">
            <el-cascader
              v-model="form.compLevelId"
              :options="compLevel"
              clearable
            ></el-cascader>
          </el-form-item>
        </el-col>
      </el-row>

這里常規傳值監聽（后面要換方式）

watch: {
    subobj: function (n, o) {
      // console.log("兄弟組件傳來了數據：", this.subobj, this.info);
      this.form = this.subobj;
      console.log("parentobj:", this.parentObj);
      this.formatTreeDate(this.form);
    },
  },

使用v-if后這種傳值就失效了，需要在鈎子函數中賦值就可以了

 mounted() {
    console.log(this.value, this.info, this.subobj);
    if (this.subobj) {
      this.form = this.subobj;
      console.log("parentobj:", this.form);
      this.formatTreeDate(this.form);
    }
  },

父組件的監聽通知和操作tab：

// 顯示workOrderPage
    showWorkOrderPage(obj) {

      this.activeName = "gongdan";

      this.subobj = obj;
      
      // 動態加載了兄弟tab組件所以需要重新賦值給workOrderLog
    },

還有個額外注意的點：如果用到v-disabled,或者不重新加載，第一個頁面的級聯選擇字典項會調不通，原因是被第二個組件的同名級聯項覆蓋了。加上v-if就好了