动态下拉框数量，动态绑定v-model

 

动态绑定  v-model="$data[a]"

 

业务导致分层两个，第一个写死

 

　　　　<div class="flex font12 flex-center">
        <div class="pd-r">数据库</div>
        <div class="flex-1">
          <el-select v-model="sqldata" class="pd-b-sm full-w" @change="handleChangeSql(1)">
            <el-option v-for="item in SqlSelectData" :key="item.name" :value="item.name">{{item.name}}</el-option>
          </el-select>
        </div>
      </div>
      
      <template v-for="index in deep">
        <div :key="index" class="flex font12 flex-center" v-if="deep > index">
          <div class="pd-r">数据库{{ index }}</div>
          <div class="flex-1">
            <el-select v-model="sqldataDeep['sqldata' + index]" class="pd-b-sm full-w" @change="handleChangeSql(index)">
              <template v-if="sqldataDeepSelectData['sqldata' + index]">
                <el-option v-for="optItem in sqldataDeepSelectData['sqldata' + index]" :key="optItem.name" :value="optItem.name">{{optItem.name}}</el-option>
              </template>
            </el-select>
          </div>
        </div>
      </template>

 

 

let sqldataDeep = {}
for (let index = 1; index < 10; index++) {
  sqldataDeep['sqldata' + index] = ''
}


data () {
    return {
      sqldata: '',
      sqldataDeep, // 数据库多层级
      sqldataDeepSelectData: {},
      deep: 1,
    }
}

 

initSqlData () {
      const { engine } = this
      getBrowse({
        type: 'DATASET',
        path: `prod,${engine}`,
      }).then(res => {
        this.SqlSelectData = LoadshGet(res, 'data.list', [])
        if (this.SqlSelectData.lenght == 0) return false
        this.sqldata = this.SqlSelectData[0].name
        if (this.SqlSelectData[0].key) {
          this.surfaceSelectData = this.SqlSelectData
          return 
        }
        this.deeep = 1
        this.initFromList(`prod,${engine},${this.sqldata}`, 1)
      })
    },


    initFromList (path, deep) {
      this.deep = deep
      const { engine, sqldata } = this
      getBrowse({
        type: 'DATASET',
        path: path || `prod,${engine},${sqldata}`
      }).then(res => {
        if (res.data.list.lenght == 0) return false
        // browseType = groups 代表有下级   entities 代表表信息
        if(res.data.browseType === 'groups') {
          this.sqldataDeep['sqldata' + deep] = res.data.list[0].name
          this.sqldataDeepSelectData['sqldata' + deep] = LoadshGet(res, 'data.list', [])
          this.initFromList(path + ',' + res.data.list[0].name, deep + 1)
          return 
        }
        this.surfaceSelectData = LoadshGet(res, 'data.list', [])
      })
    },

 

// 下拉 选择时重置数据

 handleChangeSql (type) {
      this.searchKey = ''
      this.formList = []
      this.deep = 0
      if (type == 0) {
        this.sqldata = ''
        this.SqlSelectData = []
        this.surfaceSelectData = []
        this.initSqlData()
      } else if (type == 1) {
        this.surfaceSelectData = []
        this.initFromList()
      }
    },