黑豹程序员-vue实现两级联动下拉列表

需求

在开发中这类需求很多，前后两个下拉框有紧密关系，第一个下拉框相当于一个分类，选中第一个下拉框中的某个分类后，第二个下拉框的内容随之改变，列出其分类下的选项。

图例

在这里插入图片描述
选中某个一级风险领域后，二级风险领域随之改变

实现思路

vue中必须动态刷新，它提供了compute，动态计算

下拉框

      <el-col span="1"><el-text size="small" style="font-weight: bold;">一级风险领域：</el-text><el-select v-model="firstRiskAreasIdSel" placeholder="请选择一级风险领域" size="small"><el-optionv-for="item in frList":key="item.id":label="item.name":value="item.id"/></el-select></el-col><el-col span="1"><el-text size="small" style="font-weight: bold;">二级风险领域：</el-text><el-select v-model="secondRiskAreasIdSel" placeholder="请选择二级风险领域" size="small"><el-optionv-for="item in filterSrData":key="item.id":label="item.name":value="item.id"/></el-select></el-col>

下面利于computed和filter实现数据动态过滤，动态更新

import {computed} from 'vue'
let filterData = computed(()=>{return state.tableData.filter((row)=>{//判断条件if(row.taskName === null){return true}else {return row.taskName.includes(searchName.value)}})
})//联动下拉框：选择一级风险后自动过滤出对应的二级风险
let filterSrData = computed(()=> {return srList.filter((item) => {return (item.pid == firstRiskAreasIdSel.value)})
})