欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+elementUI下拉框回顯問題及解決方式

 更新時(shí)間:2023年02月23日 17:15:19   作者:UnIQUE Eason  
這篇文章主要介紹了vue+elementUI下拉框回顯問題及解決方式,具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教

vue elementUI下拉框回顯問題

在開發(fā)過程中,總會做到修改功能,但是在修改回顯的時(shí)候,發(fā)現(xiàn)下拉框始終回顯的是id而不是文本

下面看案例

正確回顯格式應(yīng)該是這樣

正確回顯格式應(yīng)該是這樣

而回顯的確實(shí)這個值的id

原因是因?yàn)樵诮oselect復(fù)制的時(shí)候沒有重新渲染,一開始我的編輯回顯方法是這樣

// 編輯回顯
    edit() {
    	// 通過選中id查詢信息
      axios.get('/xxx/xxx/id', {
          params: { id: this.selectedRows[0].ID }
        }).then((reponse) => {
        // 然后直接賦值到表單上
          this.recordFrom = reponse.data.data[0]
        })
	   // 打開表單頁面
      this.editRecordDialog = true
    }

直接將查詢的數(shù)據(jù)賦值到表單中,只會賦值返回回來的值,如果v-model綁定的值是id,則只會顯示id,如果綁定的值是name,則只會顯示name。

所以,給表單賦值的時(shí)候需要重新渲染一下下拉框

給賦值之后下面增加了一個查詢下拉框的方法

// 編輯回顯
    edit() {
    	// 通過選中id查詢信息
      axios.get('/xxx/xxx/id', {
          params: { id: this.selectedRows[0].ID }
        }).then((reponse) => {
        // 然后直接賦值到表單上
          this.recordFrom = reponse.data.data[0]
        })
       // 重新查詢下拉框方法
       this.getNumber2()
	   // 打開表單頁面
      this.editRecordDialog = true
    }

查詢方法代碼:

// 查詢版本號到下拉框
    getNumber2() {
      axios.get('xxx/xxx/number', { 
      params: { id: this.proNameSelect } })
      .then((reponse) => {
        var obj = reponse.data.data
        for (var i = 0; i < obj.length; i++) {
          this.options5.push({ value: obj[i].ID, label: obj[i].versionNumber })
        }
      })
    }

這里附上下拉框的代碼:

<el-form-item label="版本號" prop="verID">
 <el-select class="select-type" v-model="recordFrom.verID" placeholder="請選擇版本號">
  <el-option v-for="item in options5" :key="item.ID" :label="item.versionNumber" :value="item.ID"> </el-option>
 </el-select>
</el-form-item>

重新渲染之后,就可以正?;仫@啦!

vue下拉框回顯映射

大家在做項(xiàng)目的時(shí)候,應(yīng)該非常的容易遇到,下拉框的回顯問題吧?包括單選框,復(fù)選框,級聯(lián)框的回顯

如果使用組件的話,比如element-UI,他們內(nèi)部有自己的映射方法,將id傳過去自己能回顯到下拉框中,還是挺方便的,可是如果給一個id 讓你映射出他所對應(yīng)的名字,你要怎么辦呢?讓我們一起來看看吧?

單選框

  • 后端返回的:
value: '選項(xiàng)1'
  • 下拉數(shù)組:
options: [{
? ? ? ? ? value: '選項(xiàng)1',
? ? ? ? ? label: '黃金糕'
? ? ? ? }, {
? ? ? ? ? value: '選項(xiàng)2',
? ? ? ? ? label: '雙皮奶'
? ? ? ? }, {
? ? ? ? ? value: '選項(xiàng)3',
? ? ? ? ? label: '蚵仔煎'
? ? ? ? }, {
? ? ? ? ? value: '選項(xiàng)4',
? ? ? ? ? label: '龍須面'
? ? ? ? }, {
? ? ? ? ? value: '選項(xiàng)5',
? ? ? ? ? label: '北京烤鴨'
? ? ? ? }],
// 映射方法
formatterName(options, value) {
? let obj = {}
? obj = options.find(item => item.value=== value)
? return obj.label
}, ?
// 輸出: ? 黃金糕 ? ?

多選框

  • 后端返回的:
value: ['選項(xiàng)2,選項(xiàng)4']
  • 下拉數(shù)組:
options: [{
? ? ? ? ? value: '選項(xiàng)1',
? ? ? ? ? label: '黃金糕'
? ? ? ? }, {
? ? ? ? ? value: '選項(xiàng)2',
? ? ? ? ? label: '雙皮奶'
? ? ? ? }, {
? ? ? ? ? value: '選項(xiàng)3',
? ? ? ? ? label: '蚵仔煎'
? ? ? ? }, {
? ? ? ? ? value: '選項(xiàng)4',
? ? ? ? ? label: '龍須面'
? ? ? ? }, {
? ? ? ? ? value: '選項(xiàng)5',
? ? ? ? ? label: '北京烤鴨'
? ? ? ? }],
// 映射方法
formatterName(options, value, idArr = []) {
? if (typeof options=== 'object') {
? ? ?for (let i = 0; value[i] !== undefined; i++) {
? ? ? ?for (let j = 0; options[j] !== undefined; j++) {
? ? ? ? ?if (value[i] === options[j].value) {
? ? ? ? ? ?idArr.push(options[j].label)
? ? ? ? ?}
? ? ? ?}
? ? ?}
? ?}
? ?return idArr
}, ?
// 輸出: ? ['雙皮奶','龍須面']

級聯(lián)框

  • 后端返回的:
value: ['zhinan','shejiyuanze','fankui']
  • 下拉數(shù)組:
options: [{
? value: 'zhinan',
? label: '指南',
? children: [{
? ? value: 'shejiyuanze',
? ? label: '設(shè)計(jì)原則',
? ? children: [{
? ? ? value: 'yizhi',
? ? ? label: '一致'
? ? }, {
? ? ? value: 'fankui',
? ? ? label: '反饋'
? ? }, {
? ? ? value: 'xiaolv',
? ? ? label: '效率'
? ? }, {
? ? ? value: 'kekong',
? ? ? label: '可控'
? ? }]
? }]
// 映射方法
formatterName(options, value, idArr = []) {
? if (typeof options === 'object') {
? ? for (let i = 0; value[i] !== undefined; i++) {
? ? ? for (let j = 0; options[j] !== undefined; j++) {
? ? ? ? if (value[i] === options[j].value) {
? ? ? ? ? idArr.push(options[j].label)
? ? ? ? }
? ? ? }
? ? }
? ? for (let i = 0; options[i] !== undefined; i++) {
? ? ? this.formatterName(options[i].children, value, idArr)
? ? }
? }
? return idArr
}, ?
// 輸出: ? ['指南','設(shè)計(jì)原則','反饋']

總結(jié)

以上為個人經(jīng)驗(yàn),希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論