一、先看效果
二、数据结构
说明：selected用来记录每次用户选择的值，当是单选的时候属性中的selected属性需要设置成字符串，当是复选框的时候，此时选择的是数组，selected属性应设置为数组。type用来区分当前是单选还是复选。disabled属性是配合组件使用的，意思是是否禁用该选项，name属性用来将选项渲染给用户看，_name是根据我自己的业务需求设计的，我的需求是记录用户选择的每个选项，我需要根据用户的选项在表单上进行定位，最终生成pdf文件。（此处根据自己的需求进行设计）
a: [
{
id: 1,
quesName: '1.是否取得营业执照',
checkboxList: [
{
name: '是',
disabled: false,
_name: '是'
},
{
name: '否',
disabled: false,
_name: '否'
}
],
type: 'radio',
selected: ''
},
{
id: 2,
quesName: '2.是否开展广告活动',
checkboxList: [
{
name: '是',
disabled: false,
_name: '是_1'
},
{
name: '否',
disabled: false,
_name: '否_1'
}
],
type: 'radio',
selected: ''
},
{
id: 3,
quesName: '3.广告活动主体类型',
checkboxList: [
{
name: '广告主',
disabled: false,
_name: '广告主'
},
{
name: '广告经营者',
disabled: false,
_name: '广告经营者'
},
{
name: '广告发布者',
disabled: false,
_name: '广告发布者'
},
{
name: '广告代言人',
disabled: false,
_name: '广告代言人'
}
],
type: 'checkbox',
selected: []
},
{
id: 4,
quesName: '4.广告活动媒介',
checkboxList: [
{
name: '电视',
disabled: false,
_name: '电视'
},
{
name: '广播',
disabled: false,
_name: '广播'
},
{
name: '报纸',
disabled: false,
_name: '报纸'
},
{
name: '期刊',
disabled: false,
_name: '期刊'
},
{
name: '户外',
disabled: false,
_name: '户外'
},
{
name: '印刷品',
disabled: false,
_name: '印刷品'
},
{
name: '互联网（其中：互联网门户网站',
disabled: false,
_name: '互联网门户网站'
},
{
name: '搜索引擎平台',
disabled: false,
_name: '搜索引擎平台'
},
{
name: '电子商务平台',
disabled: false,
_name: '电子商务平台'
},
{
name: '其他）',
disabled: false,
_name: '其他'
}
],
type: 'checkbox',
selected: []
}
]
三、html骨架
此处使用了u-view组件中的u-radio和u-checkbox，此处需要注意样式，因为这个默认样式不美观，自己需要调整，css调整方法可以外部引入一个css文件，这种可以改变默认样式，其他方式自己探索。
<!-- 单选框、复选框表单 -->
<view v-for="(item, index) in a" :key="item.id">
<view class="quName">{{ item.quesName }}</view>
<u-radio-group v-if="item.type == 'radio'" v-model="item.selected" placement="row" @change="(value) => checkboxChange(value, item.id)">
<u-radio
:customStyle="{ marginLeft: '8px' }"
v-for="(items, indexs) in item.checkboxList"
:key="indexs"
:label="items.name"
:name="items._name"
:disabled="items.disabled"
></u-radio>
</u-radio-group>
<u-checkbox-group v-else v-model="item.selected" placement="row" @change="(value) => checkboxChange(value, item.id)">
<u-checkbox
:customStyle="{ marginLeft: '8px' }"
style="margin-top: 5px"
v-for="(items, indexs) in item.checkboxList"
:key="indexs"
:label="items.name"
:name="items._name"
:disabled="items.disabled"
></u-checkbox>
</u-checkbox-group>
</view>
此处需要重点讲解@change="(value) => checkboxChange(value, item.id)"函数，该组件change函数默认是返回一个值，那就是当前用户选择的值，我们需要将用户选择的值设置到数据结构中的selected属性中，此处很多人可能会用一个疑惑，为什么在设置多选框的时候，是怎么将用户选择的值设置到对应的selected熟悉中呢，此处组件已经完美解决了这个问题，我们每次勾选多选框中的时候，每次触发checkboxChange函数的时候，返回的是一个数组，你勾选几个值就返回当前你勾选的值，这个值是一个数组，每次会根据当前题目的id赋值到对应的selected中去。
checkboxChange(value, id) {
this.a = this.a.map((item) => {
if (item.id == id) {
return { ...item, selected: value };
}
return item;
});
console.log(value, id);
},
四、过滤数据
此处需要将用户选择的非空选项对应的_name值记录到一个数组中去
let quesAndSeleted = [];
this.a.map((item) => {
if (Array.isArray(item.selected)) {
quesAndSeleted = quesAndSeleted.concat(item.selected);
} else {
quesAndSeleted.push(item.selected);
}
});
//数据过滤
this.form.quesAndSeleted = quesAndSeleted.filter(item=>
item!==null && item!==undefined && item!==""
);
五、改变样式
在你自己的页面中导入import ‘…/…/…/css/form.css’;（为什么选择外部引入css呢？因为内部我尝试了修改不生效，可能需要使用css渗透，懒得试了）
form.css文件
.u-radio-group--row.data-v-97ce24d6 {
margin-top: 10px;
}
.u-checkbox-group--row.data-v-2ef8bac9 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
/* margin-top: 10px; */
}
.data-v-c4a74aee{
margin-top: 3px;
}
.u-button--square.data-v-2bf0e569 {
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
margin-bottom: 10px;
width: 90vw;
margin-top: 10px;
}
