适用场景描述:在项目中实现编辑功能时,如页面存在下拉框且下拉框的数据在点击相应的select时进行调用( 在编辑时可能需要修改部分数据,而且存在部分下拉数据并不是必选项,如果直接获取所有的下拉数据,可能会造成浪费 ),需要在下拉框内显示已有的值作为默认值,如图所示(以官网给的数据为例):

绑定值为字符串:
如果只是需要数据的单个值,例如:value时,直接把值绑定给value就可以。
代码:
页面代码:

<el-select v-model="value" placeholder="请选择" @change="getItem(value,'radio')">
	<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
	</el-option>
</el-select>

js:

<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: '选项1'
      }
    },
    methods:{
      getItem(obj, type) {
		console.log(obj);
		console.log(type);
	  },
    }
  }
</script>

以上代码只是最简单的实现方式,但是项目中往往会遇到下拉选中的数据需要的不止其一个属性,这时候需要拿到整个对象才能实现。

绑定值为对象:
添加value-key作为唯一性标识,把value绑定的值改为整个对象。
思路:绑定单个属性时,设置默认值可以在options(下拉框数据集合)值为空的情况下实现,但是绑定值为对象,如果需要在不请求接口获取下拉集合的情况下设置默认值的话,则无法正常显示,此时只需要把已获取的默认值整合为一个对象放在options的集合内即可实现对象的默认值,在点击下拉框时再请求接口数据进行下拉框数据集合的重新赋值,具体实现如下所示:

<el-select v-model="value1" placeholder="请选择" value-key="value" @change="getItem(value1,'checkbox')">
	<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item">
	</el-option>
</el-select>
<script>
  export default {
    data() {
      return {
        options: [{
          value: '选项1',
          label: '黄金糕'
        }],
		value1: {
			value: '选项1',
			label: '黄金糕'
		}
      }
    },
    methods:{
      getItem(obj, type) {
		console.log(obj);
		console.log(type);
	  },
    }
  }
</script>
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45 5 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 5 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐