el-table+ el-cascader

只能选择同一实例名下的多个数据库

第一级单选，其他禁用

缺点：table每一行dboptions不一样（disabled不同）

<el-cascader               expand-trigger="hover"
                                    :options="scope.row.dboptions"
                                    :props="{ multiple: true }"
                                    v-model="scope.row.db"
                                    filterable
                                    clearable
                                    style="width:100%;"
                                    @change="changedboptions(scope.row)">

</el-cascader>

changedboptions(row){
      if (row.db.length !== 0) {
        for (var i = 0; i < row.dboptions.length; i++) {
          if (row.dboptions[i].value !== row.db[0][0]) {
            row.dboptions[i].disabled = true
          }
        }
      } else{
        for (var i = 0; i < row.dboptions.length; i++) {
            row.dboptions[i].disabled = false
        }
      }
    },

同一实例下的自动全选

<el-cascader               expand-trigger="hover"
                                    :options="dboptions"
                                    :props="{ multiple: true }"
                                    v-model="scope.row.db"
                                    filterable
                                    clearable
                                    style="width:100%;"
                                    @change="changemongodb(scope.row)">

</el-cascader>

changemongodb(row){
      if (row.db.length !== 0) {
        // 找到第一级，可多个
        var firstarray = []
        for (var i = 0; i < row.db.length; i++) {
          if (firstarray.indexOf(row.db[i][0]) == -1) {
            firstarray.push(row.db[i][0])
          }
        }
        // 全选第二级
        row.db = []
        for (var i = 0; i < this.dboptions.length; i++) {
          if (firstarray.indexOf(this.dboptions[i].label) !== -1) {
            for (var j = 0; j < this.dboptions[i].children.length; j++) {
              var array = []
              array[0] = this.dboptions[i].label
              array[1] = this.dboptions[i].children[j].label
              row.db.push(array)
            }
          }
        }
      }
    },

一个实例全选

在上一个基础上，一级单选

<el-cascader               expand-trigger="hover"
                                    :options="dboptions"
                                    :props="{ multiple: true }"
                                    v-model="scope.row.db"
                                    filterable
                                    clearable
                                    style="width:100%;"
                                    @change="changemysql(scope.row)">
</el-cascader>

changemysql(row){
        if (row.db.length !== 0) {
          // 只要一个集群，选择最新选择的集群
          if (row.name && row.db[0][0] === row.name) {
            row.name = row.db[row.db.length-1][0]
          } else{
            row.name = row.db[0][0]
          }
          // 全选第二级
          row.db = []
          for (var i = 0; i < this.dboptions.length; i++) {
            if (this.dboptions[i].label === row.name){
              for (var j = 0; j < this.dboptions[i].children.length; j++) {
                var array = []
                array[0] = this.dboptions[i].label
                array[1] = this.dboptions[i].children[j].label
                row.db.push(array)
              }
            }
          }
        }
      },