昨天书写了一篇如何从零开始uni-app开发的vue项目,今天准备写一篇处理界面元素动态加载的案例:
背景:有不同类别的设备,每个设备有每日检查项目、每周检查项目、每年检查项目,需要维保人员,根据不同设备和检查类别对检查项目进行处理,提交数据。
首先看一下界面:
<template>
<view class="bolili">
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">设备编码:</text></view>
<view class="uni-input-wrapper">
<input class="uni-input" focus placeholder="扫描设备二维码" v-model="DriverID" @input="SelectDriverData"/>
</view>
<button type="primary" @click="SelectDriverData">加载设备信息</button>
</view>
<view class="uni-form-item uni-column">
<view class="title"><text class="uni-form-item__title">点检明细:</text></view>
</view>
<view class="uni-list">
<checkbox-group @change="checkboxChange">
<label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
<view>{
{item.name}}</view>
<view>
<checkbox :value="item.value" />
</view>
</label>
</checkbox-group>
</view>
<button type="primary" @click="tijiao">提交</button>
</view>
</template>
<script>
export default {
data() {
return {
DriverID:"",
username:"this.$globals.us",
date:"day",
tijiaores:0,
DeviceType:"",
DJType:"",
DJContent:"",
index:0,
checked:"",
items: [
{
value: '1',
name: '检查机体接地是否正常',
checked:'false'
},
{
value: '2',
name: '检查仪器/设备开关机是否正常',
checked:'false'
},
{
value: '3',
name: '仪器/设备显示屏、按键、传动是否正常',
checked:'false'
},
{
value: '4',
name: '工作区域是否整洁,干净;是否摆放整齐',
checked:'false'
},
{
value: '5',
name: '开机检查剥离滑块运行是否正常',
checked:'false'
},
{
value: '6&#