循环u-select,根据后台返回的不同id,给对应的循环u-select渲染数据

把值传给组件,然后在组件上循环数据
请添加图片描述
返回的数据展示:

"data" : [ {
    "typeDevice" : [ {
    “column_form”:“2”,//下拉框
      "column_name" : "单选框",
      "value_id" : 55,
    }, {
        “column_form”:“2”,//下拉框
      "column_name" : "列表框",
      "column_select" : " 下拉1;下拉2;下拉3",
      "value_id" : 51,

    }, {
        “column_form”:“2”,//下拉框
      "column_name" : "第二个列表框",
      "column_select" : "值1;值2;值3",
      "value_id" : 52,
    }
    ...省略
  } ]
}

父页面展示的u-select

			<view class="line" v-for="(items,indexs) in item.vals">
				<view class="li-name">{{items.column_name}}</view>
				<!-- 下拉框 -->
				<view class="li-price" v-else-if="items.column_form==2">
				<!--通过prop先把值传递到pick(u-select封成的组件里)-->
					<byqpick :key="items" :data='items'></byqpick>
				</view>
			</view>

u-select子组件

<template>
	<view class="leave_cont">
		<view class="content-list" style="height: 35px; line-height: 35px;">
			<view class="posit-input flex-start" @click="show = true">
				<label style="padding-left: 11px;" @tap="getLightType">{{ result }}</label>
				<u-select :default-value="defaultValue" :mode="mode" v-model="show" :list="list" @confirm="confirm"
					@cancel="cancel">
				</u-select>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				show: false,
				result: '尚未选择',
				keya: '',
				defaultValue: [0], //默认选项
				mode: 'single-column', // single-column, mutil-column, mutil-column-auto
				list: [],
			};
		},
		props: ['data'],
		created() {
			let _this = this;
			console.log(_this._props)
			let props = {
				..._this._props
			};
			let values = props.data.column_select.split(";");
			console.log(values);
			for (var i = 0; i < values.length; i++) {
				var obj = {
					label: values[i],
					value: values[i]
				};
				this.list.push(obj);
			}
		},
		methods: {
			confirm(e) {},
			cancel(e) {}
		}
	}
</script>
可以通过 `el-select` 的 `filterable` 属性和 `remote` 方法来实现根据后台返回的状态码显示对应的文字。 首先,设置 `el-select` 的 `filterable` 属性为 `true`,这样就可以在下拉列表中进行搜索。 其次,设置 `el-select` 的 `remote` 方法,当用户在搜索框中输入关键字时,会触发 `remote` 方法,并将搜索关键字作为参数传递给该方法。在 `remote` 方法中,可以使用 `axios` 或其他库将关键字发送到后台进行搜索,并根据返回的状态码显示对应的文字。 以下是一个示例代码: ```html <el-select v-model="value" filterable remote :remote-method="search"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select> ``` ```javascript export default { data() { return { value: '', options: [] } }, methods: { search(query) { axios.get('/api/search', { params: { q: query } }).then(res => { if (res.data.code === 200) { this.options = res.data.data.map(item => ({ label: item.name, value: item.id })) } else { this.$message.error(res.data.message) } }).catch(err => { this.$message.error('网络错误,请稍后重试') }) } } } ``` 在上面的示例代码中,`search` 方法中使用 `axios` 发送搜索请求,并在请求成功后根据返回的状态码判断是否显示错误信息。如果状态码为 `200`,则将搜索结果转换成 `el-option` 组件需要的格式,并赋值给 `options` 属性。如果状态码不为 `200`,则显示错误信息。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值