Vue Element组件动态el-tab嵌套form表单验证

想找动态增减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) {
          //业务逻辑...
        }
      })
    }
  }
}