Vue.js Element UI 多选框筛选列表数据 - 实现动态展示

"<el-form-item label="个人信息" prop="personalInfo">\n <el-checkbox-group v-model="checkedCities" @change="personChange">\n <el-checkbox v-for="(itemP,indexP) in customizeList" :key="indexP" :label="itemP.customizeId">{{itemP.itemLabel}}\n \n <el-table :data="personalList" style="padding-top: 20px">\n <el-table-column prop="customizeId" label="个人信息名称">\n <template slot-scope="scope">\n {{ customizeList.find(item => item.customizeId === scope.row.customizeId).itemLabel }}\n \n \n <el-table-column label="是否必选" prop="isRequired">\n <template slot-scope="scope">\n <el-switch v-model="scope.row.isRequired" active-color="#13ce66" inactive-color="#ff4949" active-value="1"\n inactive-value="0" active-text="是" inactive-text="否">\n \n \n \n <el-table-column label="操作">\n <template #default="scope">\n <el-button link type="danger" size="small" icon="el-icon-edit" circle\n @click.prevent="updatePersonalRow(scope.row,scope.$index)" />\n\n <el-button link type="primary" size="small" icon="el-icon-delete" circle\n @click.prevent="deletePersonalRow(scope.$index)" />\n \n \n \n \n怎么根据多选框的选择显示列表里的数据内容：根据多选框的选择显示列表里的数据可以通过以下步骤实现：\n\n1. 首先，在data中定义一个变量，用于存储多选框选中的值。例如：\n\njavascript\n data() {\n return {\n checkedCities: [], // 存储多选框选中的值\n personalList: [] // 列表数据\n }\n},\n\n\n2. 在多选框组件的change事件中，根据选中的值来筛选列表数据。例如：\n\njavascript\n methods: {\n personChange() {\n // 根据选中的值来筛选列表数据\n this.personalList = this.customizeList.filter(item => this.checkedCities.includes(item.customizeId));\n }\n},\n\n\n3. 在模板中，将personalList绑定到el-table的data属性上，这样就可以根据多选框的选择显示相应的列表数据了。例如：\n\nhtml\n<el-table :data=\"personalList\" style=\"padding-top: 20px\">\n <!-- 表格列的定义 -->\n</el-table>\n\n\n这样，当多选框的选择发生变化时，personalList的值会根据选中的值进行筛选，从而实现显示对应的列表数据。