想找動態增減tab頁的表單動態驗證示例，網上的文章基本上都是固定多tab頁的驗證，el-form-item的prop書寫格式也極為麻煩，按搜到的文章教程敲了半天，一直報錯prop路徑不對。
最后索性直接在外層套一個div用if來控制dom中只顯示當前選擇的tab頁，這樣el-from-item中就不用:prop外加一大串的復雜路徑拼接，還是用prop就能確定驗證的字段路徑了。

<el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">
  <el-tab-pane v-for="(item, index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
      <!--關鍵代碼，這個div里通過判斷item.show的值來控制只把當前tab頁渲染到dom樹中-->
    <div v-if="item.show === true">
      <el-form :model="item.request_tab_data" ref="table_url" :rules="rules" >
        <!--由于外層有v-if控制dom樹只存在當前tab頁，所以不用:prop，直接用官方示例中的prop-->
        <el-form-item prop="url" >
          <el-input placeholder="請輸入URL" v-model="item.request_tab_data.url" class="input-with-select" style="width: 100%" />
        </el-form-item>
        <el-button type="primary" @click="tj(index,'table_url')">
          Run
        </el-button>
      </el-form>
    </div>
  </el-tab-pane>
</el-tabs>

<script>
export default {
  data () {
    editableTabsValue: "1",
    editableTabs: [{
      title: "Tab 1",
      name: "1",
      show: false, //控制dom中只存在當前選擇的tab頁
    }],
    //表單驗證規則
    rules: { url: [{ required: true, message: "請輸入URL" }] },
  },
  methods: {
    tj(index,formName) {
      this.$refs[formName][0].validate(valid => {
        if (valid) {
          //業務邏輯...
        }
      })
    }
  }
}