[뷰] 임베디드 드롭 다운 상자 목록

어떻게 포함 드롭 다운 목록에 같은 다음과

구현 코드를 :

<el-table
  border
  :data="linkData">
  <el-table-column
    label="终端"
  >
    <template slot-scope="scope">
      <el-select v-if="scope.row.addSign" v-model="dataForm.terminal" @change="getLinkDataForAdd(null)" :rule="dataRule">
        <el-option
          v-for="item in terminalOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </template>
  </el-table-column>
  <el-table-column
    label="功能分类"
  >
    <template slot-scope="scope">
      <el-select v-if="scope.row.addSign" v-model="dataForm.funClassifyId" @change="getLinkDataForAdd(null)" filterable>
        <el-option
          v-for="item in funClassifyOptions"
          :key="item.id"
          :label="item.funName"
          :value="item.id">
        </el-option>
      </el-select>
    </template>
  </el-table-column>
  <el-table-column
    label="标题"
  >
    <template slot-scope="scope">
      <el-select v-if="scope.row.addSign" v-model="dataForm.funIntroId" filterable clearable>
        <el-option
          v-for="item in linkForAddOptions"
          :key="item.id"
          :label="item.title"
          :value="item.id">
        </el-option>
      </el-select>
    </template>
  </el-table-column>
  <el-table-column
    label="操作"
  >
    <template slot-scope="scope">
      <el-button type="text" size="small" v-if="scope.row.addSign" @click="resetData()">删除</el-button>
    </template>
  </el-table-column>
</el-table>

// 查询可供添加的链接
getLinkDataForAdd(funIntroId) {
  var terminal = this.dataForm.terminal
  var funClassify = this.dataForm.funClassifyId
  if (!terminal || !funClassify) {
    return
  }
  this.$http({
    url: this.$http.adornUrl('/storefunintro/listByTerminalAndClassify'),
    method: 'get',
    params: this.$http.adornParams({
      'terminal': terminal,
      'funClassify': funClassify
    })
  }).then(({data}) => {
    debugger
    if (funIntroId) {
      this.dataForm.funIntroId = funIntroId
    } else {
      this.dataForm.funIntroId = null
    }
    if (data && data.code === 0) {
      console.log('data.links:-------'+data.links)
      this.linkForAddOptions = data.links
    } else {
      this.linkForAddOptions = []
    }
  }).catch(() => {
  })
},
// 删除关联
removeLink (id) {
  var delteIndex = -1;
  for (var index = 0; index < this.linkData.length; inde++) {
    if (this.linkData[index]['id'] == id) {
      delteIndex = index
      break
    }
  }
  this.linkData.splice(delteIndex, 1)
},
// 重置数据
resetData() {
  this.dataForm.terminal = 1
  this.dataForm.funClassifyId = ''
  this.dataForm.funIntroId = ''
  this.dataForm.title = ''
  this.linkData = [{'addSign': true}]
  this.linkForAddOptions = []
}
// 查询分类
getClassifyData() {
  this.$http({
    url: this.$http.adornUrl('/storefunclassify/list'),
    method: 'get',
    params: this.$http.adornParams({
      'page': 1,
      'limit': 1000
    })
  }).then(({data}) => {
    if (data && data.code === 0) {
      this.funClassifyOptions = data.page.list
    } else {
      this.funClassifyOptions = []
    }
  }).catch(() => {
  })
},
getLabelByValue(options, value, valueName, labelName) {
  if (!options) {
    return value
  }
  if (!valueName) {
    valueName = 'value'
  }
  if (!labelName) {
    labelName = 'label'
  }
  for (var index = 0; index < options.length; index++) {
    if (options[index][valueName] == value) {
      return options[index][labelName]
    }
  }
  return ''
},
mounted () {
  this.getClassifyData()
}

요약 :
VUE는 양방향 바인딩, 거의 기본, 간단한 조작을 이해하지만, 문제의 세부 사항의 일부뿐만 아니라 요구를 충족하기 위해 더 배울 필요가 있습니다.