Quasar组件库

73万字的Java面试题库【全网最详细-找工作/实习必备神器】：

https://mp.weixin.qq.com/mp/appmsgalbum?__biz=MzE5MTY1NzczOA==&action=getalbum&album_id=4057608455186808839
Java面试题库ps：网上面试题多而杂，自己整理了一套面试题，我靠这套面试题 2年经验拿15k~

Quasar组件库

单选框

    <q-fieldv-model="form.enable"label="是否启用":readonly="readonly"densestack-labeloutlinedhide-bottom-space><template #label><span class="text-negative">*</span><span>是否启用</span></template><q-option-groupv-model="form.enable":options="$dict.enable":disable="readonly"inline/></q-field>

多选框

<div class="form-field" ><div class="title"><span v-if="!readonly" class="required">*</span>所属权限</div><div class="flex"><div class="checkbox-group"><div class="form-label">政务审核：</div><div class="form-control"><q-checkbox v-model="form.govAudit" :disable="readonly" val="1" label="镇/街审核"/><q-checkbox v-model="form.govAudit" :disable="readonly" val="2" label="区审核"/></div></div><div class="checkbox-group"><div class="form-label">资源资产管理：</div><div class="form-control"><q-checkbox v-model="form.assetManagement" :disable="readonly" val="1" label="查看数据" /><q-checkbox v-model="form.assetManagement" :disable="readonly" val="2" label="数据补录" /></div></div><div class="checkbox-group"><div class="form-label">资源资产事项申报：</div><div class="form-control"><q-checkbox v-model="form.assetDeclare" :disable="readonly" val="1" label="查看数据" /><q-checkbox v-model="form.assetDeclare" :disable="readonly" val="2" label="事项申报" /></div></div></div></div>

骚戴理解：这里的每一个多选框的标签对应数据库中一个字段，例如assetDeclare对应数据库的一个字段，然后多选框选中后会变成一个数组，存储的时候需要把数组转成以逗号分隔的字符串，以便存到数据库中，上面的:disable="readonly"是用来控制多选框的禁用的，readonly是动态绑定，如果为true就是禁用【只读】

// 把权限数组转成字符串
param.govAudit = param.govAudit.join(',')
param.assetDeclare = param.assetDeclare.join(',')
param.assetManagement = param.assetManagement.join(',')

然后在编辑或者查询的时候把这个字符串拆分成一个数组就可以实现多选框的数据回显了

async function toEdit (id) {form.value = await proxy.$server.post('user/getUserDetail', { id })// 三种权限由字符串转成数组if (form.value.govAudit) {form.value.govAudit = form.value.govAudit.split(',')}if (form.value.assetManagement) {form.value.assetManagement = form.value.assetManagement.split(',')}if (form.value.assetDeclare) {form.value.assetDeclare = form.value.assetDeclare.split(',')}readonly.value = falseshowEditDialog.value = true
}

最后就是列表如何把这个多选框的值展示出来

    {label: '所属权限',name: 'id',align: 'left',format: (val, row) => {let govAuditText = ''let assetDeclareText = ''let assetManagementText = ''console.log(assetDeclareMap, assetManagementMap)if (row.govAudit) {const textArr = []row.govAudit.split(',').forEach(k => {textArr.push(govAuditMap[k])})govAuditText = '政务审核：' + textArr.join('、')}if (row.assetDeclare) {const textArr = []row.assetDeclare.split(',').forEach(k => {textArr.push(assetDeclareMap[k])})assetDeclareText = '资源资产管理：' + textArr.join('、')}if (row.assetManagement) {const textArr = []row.assetManagement.split(',').forEach(k => {textArr.push(assetManagementMap[k])})assetManagementText = '资源资产事项申报：' + textArr.join('、')}return [govAuditText, assetDeclareText, assetManagementText].filter(item => item !== '').join('；')}},