(一)项目需求+效果图
1.需求
根据后端查询的数据,点击搜索框,自动显示数据,同时数据等间距。数据多时,可以自动换行。
2.效果图:
(二)代码+代码解析
1.代码:
<template>
<van-row>
<van-col span="8" v-for="(item, i) of processName" :key="i" justify="center">
<van-cell-group v-show="isShow" >
<van-field v-model="processName[i]"/>
</van-cell-group>
</van-col>
</van-row>
</template>
<script>
export default {
data () {
return {
//后端返回的detailContent存放
processName: [],
//默认不显示
isShow:false
}
},
methods: {
test(){
var vm = this;
// 调用后端查询的地址
var url = process.env.VUE_APP_BACKEND_URL + "/groupProcess/secondProcess/11";
// 后端地址为get请求
this.$axios.get(url).then((response) => {
for (let index = 0; index < response.data.data.length; index++) {
//循环数组里的值
vm.processName.push(response.data.data[index].processName);
}
//如果流程名称有值,则显示
if(vm.processName){
vm.isShow=true;
}
}, (error) => {
//发生错误时,输出错误信息
console.log(error);
});
}
},
};
</script>