uni-app动态获取数据,级联选择器来显示

<view class="layout" :style="{height:`${windowHeight}px`}">
	
			<u--form>
				<u-form-item class="form—label" label="xxx" labelWidth="80px">
					<uni-data-picker :map="{text:'name',value:'id'}" v-model="form.category" :localdata="categoryTree"
						popup-title="请选择">uni-data-picker>
				u-form-item>
			u--form>
				
			<u--form>
				<u-form-item class="form—label" label="xx" labelWidth="80px">
					<uni-data-select v-model="value"  :localdata="sourceOptions">uni-data-select>
				u-form-item>
			u--form>
<view>
<script>
	import {categorySelect} from '@/api/xxx/index.js'
	export default {
		data() {
			return {
				form: {
					category: 0,
				},
				
				categoryTree: [],
				
				value: 1,
				sourceOptions: [{
						value: '1',
						text: 'xx',
					}, {
						value: '2',
						text: 'xx',
					}, {
						value: '3',
						text: 'xx',
					}

				],
			}
		},
		created() {
			this.getCategoryTree()
		},
		computed: {
			windowHeight() {
				return uni.getSystemInfoSync().windowHeight - 50
			}
		},
		methods: {

			getCategoryTree() {
				categorySelect(0)
					.then(res => {
						this.categoryTree = res.data
					})
					.catch((error) => {
						this.loading = false;
					});
			},
	}
script>
接口
import request from '@/utils/request';
export function categorySelect(id) {
  return request({
    url: '/asset/xx/xxx/' + id,
    method: 'get'
  })
}

效果图(都是uni-app框架)
uni-app动态获取数据,级联选择器来显示_第1张图片

uni-app动态获取数据,级联选择器来显示_第2张图片
以下是可以取到最后一个数据
uni-app动态获取数据,级联选择器来显示_第3张图片
uni-app动态获取数据,级联选择器来显示_第4张图片
uni-app动态获取数据,级联选择器来显示_第5张图片

你可能感兴趣的:(uni-app)