【Vue】列表嵌入下拉框

迈不过友情╰ 2021-12-03 04:29 419阅读 0赞

如何将下拉框嵌入列表，如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvbmd3ZWkxNTczMjYyMzM2NA_size_16_color_FFFFFF_t_70]  
实现代码：

<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，了解了双向绑定，基本简单的操作差不多了，但是一些细节的问题，还需要学习更多才能满足所需。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hvbmd3ZWkxNTczMjYyMzM2NA_size_16_color_FFFFFF_t_70]: /images/20211203/41169865290d417b82572df14e72ad6b.png