Avue 獲取下拉框中 label和value 的值實現下拉框信息聯動

標簽：前端

最近搞了一下前端，遇到了個棘手的問題，無法同時獲取前端的下拉框數據

前端框架 Avue

方法一使用的是avue-crud組件

最終要實現的效果：

上代碼：

// 示例數據:[{id: '111',name: '產品A'}, {id: '222',name: '產品B'}]

<avue-crud ref="crud" :data="data" v-mode='form' :option="option" ></avue-crud>      

  column: [
          {
            label: '產品ID',
            prop: 'id',//需要提交的數據字段
            type: 'tree',
            dicUrl: '/調用后臺接口，獲取List數據', // 接口路徑
            props: {
              label: 'name',//產品名稱
              value: 'id',//產品ID
            },
            slot: true,
            nodeClick: (data) => {
              // 節點點擊的時候會獲取到數據
              this.form.name = data.name //產品名稱
              this.form.id = data.id //產皮ID
            }
          },
          {
            label: '產品ID',
            prop: 'id' //下拉框中label的值
          },
          {
            label: '產品名稱',
            prop: 'name' //下拉框中value的值
          }

方法二瀏覽器傳輸數據的時候攜帶了$id，$id的參數就是下拉框數據的label

在添加和修改的方法下進行賦值

方法三：獲取下拉列表中value的值

            change:(val) => {

                console.log("val===================="+JSON.stringify(val))

                this.form.id = val.value;

              },

注：本人剛開始用的是第二種方法，但是后來不知道為什么。$攜帶參數的數據沒有了，一直沒找到原因，如有大神還請多多指教，后來沒有辦法用的第一種方法

本文鏈接：https://blog.csdn.net/qq_24981615/article/details/126742695

智能推薦

ant design分享記錄-select下拉框獲取value和label

ant design select 下拉獲取value和label過程請耐心看完整個過程獲取過程 select change方法觸發，可以獲取到value,第二個參數是option選項，在這個對象里可以查找到數據獲取到label，然后在trim()下就獲取到label文本了我看到別人寫的ant design說加上labelInValue=“true” 有初始數據的，...

freemarker + ItextRender 根據模板生成PDF文件

1. 制作模板 2. 獲取模板，并將所獲取的數據加載生成html文件 2. 生成PDF文件其中由兩個地方需要注意，都是關于獲取文件路徑的問題，由于項目部署的時候是打包成jar包形式，所以在開發過程中時直接安照傳統的獲取方法沒有一點文件，但是當打包后部署，總是出錯。于是參考網上文章，先將文件讀出來到項目的臨時目錄下，然后再按正常方式加載該臨時文件；還有一個問題至今沒有解決，就是關于生成PDF文件...

電腦空間不夠了？教你一個小秒招快速清理 Docker 占用的磁盤空間！

Docker 很占用空間，每當我們運行容器、拉取鏡像、部署應用、構建自己的鏡像時，我們的磁盤空間會被大量占用。如果你也被這個問題所困擾，咱們就一起看一下 Docker 是如何使用磁盤空間的，以及如何回收。 docker 占用的空間可以通過下面的命令查看： TYPE 列出了docker 使用磁盤的 4 種類型： Images：所有鏡像占用的空間，包括拉取下來的鏡像，和本地構建的。 Con...