select-options根据val取

2018/10/08

场景:前后是text值,后台存value值,读取时转换,根据value取他的text。

				var obj ={
					0:'请选择',
					1:"aaa",
					2:"sss",
					3:"ddd",
					4:"fff"
				}
				for(var k in obj){
					length++;
					if(data.msg.type==k){
						$("#type1").append("<option selected='selected' value='"+k+"'>"+obj[k]+"</option>");
					}else{
						$("#type1").append("<option value='"+k+"'>"+obj[k]+"</option>");
					}
				}
要在Quasar的QSelect组件中显示已选中的值,你可以使用`computed`属性来获已选中的值,并在输入框中显示它们。 在你的Vue组件中添加一个`computed`属性来获已选中的值。然后,在QSelect组件中,将这个`computed`属性绑定到`value`属性上,以显示已选中的值。 下面是示例代码,展示了如何在QSelect组件的输入框中显示已选中的值: ```vue <template> <div> <q-select outlined :options="CompanyCodeOptions" v-model="submitData.CompanyCodes" label="公司代码" dense clearable hint="请选择公司代码" filled emit-value map-options use-input input-debounce="0" :multiple="true" :hide-selected="true" :max-values="50" :rules="[val => val !== null && val !== '' || '请选择公司代码']" @filter="filterCompanyCode" :value="selectedCompanyCodes" // 绑定已选中的值到 value 属性 ></q-select> </div> </template> <script> export default { data() { return { CompanyCodeOptions: [ // 选项列表... ], submitData: { CompanyCodes: [] // 存储选中的值 } }; }, computed: { selectedCompanyCodes() { // 根据选中的值生成一个包含 label 的数组 return this.submitData.CompanyCodes.map(code => { const option = this.CompanyCodeOptions.find(option => option.value === code); return option ? option.label : ''; }); } }, methods: { filterCompanyCode(val, update) { // 过滤方法的实现... } } }; </script> ``` 在上面的代码中,我们添加了一个名为`selectedCompanyCodes`的`computed`属性。这个属性根据`submitData.CompanyCodes`中选中的值,生成一个包含每个选项的label的数组。 然后,在QSelect组件中,我们通过`:value`属性将`selectedCompanyCodes`绑定到输入框的值上,以显示已选中的值。 通过这种方式,你可以在QSelect组件的输入框中显示已选中的值。 希望这个解决方案对你有所帮助!如果还有其他问题,请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值