怎样根据option的值来控制部分表单的显示和隐藏

Question

antd2+vue3中怎么实现根据select下拉框的值显示不同的抽屉表单

产品名称有这些不同产品名称对应不同的表单

例如产品名称选中串口时显示这些表单

例如选择自定义时显示这样的表单

现在我把完整的表单构建编写完成，怎样来控制部分表单的显示和隐藏

Answer 1

const drawerFromList = reactive([
{
id: 0,
type: 'select',
name: 'productName',
label: '产品名称',
selectlist: [
{
selectid: 1,
content: '交互屏',
value: '交互屏',
},
{
selectid: 2,
content: '纳米黑板',
value: '纳米黑板',
},
{
selectid: 3,
content: '投影机',
value: '投影机',
},
{
selectid: 4,
content: '班牌',
value: '班牌',
},
{
selectid: 5,
content: '功放',
value: '功放',
},
{
selectid: 6,
content: '视频矩阵',
value: '视频矩阵',
},
{
selectid: 7,
content: '空调',
value: '空调',
},
{
selectid: 8,
content: '智能电视',
value: '智能电视',
},
{
selectid: 9,
content: '刷卡器',
value: '刷卡器',
},
{
selectid: 10,
content: '光照传感器',
value: '光照传感器',
},
{
selectid: 11,
content: '空气质量传感器',
value: '空气质量传感器',
},
{
selectid: 12,
content: '自定义产品',
value: '自定义产品',
},
],
},
{
show: true,
name: 'addProduct',
type: 'addAgency',
content: '添加产品',
},
{
id: 1,
type: 'select',
name: 'brandName',
label: '品牌名称',
treeData: [
],
},
{
show: true,
name: 'addBrand',
type: 'addAgency',
content: '添加品牌',
},
{
id: 2,
type: 'select',
name: 'versionName',
label: '型号名称',
},
{
show: true,
name: 'addVersion',
type: 'addAgency',
content: '添加型号',
},
{
id: 3,
type: 'select',
name: 'expressionSelection',
label: '表达式选择',
visible: true,
},
{
id: 4,
type: 'select',
name: 'infraredCode',
label: '红外码库',
},
{
id: 5,
type: 'select',
name: 'serialCode',
label: '串口码库',
},
]);