口碑好企业网站建设,珠海生活网,wordpress伪静态 插件,南昌百度网站快速排名日常开发中#xff0c;经常会遇到下面场景#xff1a;
页面加载一个无分页列表#xff0c;同时工具栏设置多个条件可对列表过滤的场景(典型的就是关键字模糊查询)父组件传给子组件列表#xff0c;子组件中需要多选列表多选#xff0c;选择结果返回父组件
1 无分页列表过…日常开发中经常会遇到下面场景
页面加载一个无分页列表同时工具栏设置多个条件可对列表过滤的场景(典型的就是关键字模糊查询)父组件传给子组件列表子组件中需要多选列表多选选择结果返回父组件
1 无分页列表过滤
思路无分页列表是最简单的情况列表直接绑定计算属性即可
templatediv classpage-containerel-input v-modelkeyword placeholder请输入关键字/el-inputdiv classlist v-foritem in filteredList :keyitem.idspan{{ item.id }}/spanspan{{ item.name }} /spanspan{{ item.status }}/span/div/div
/templatescript langts setup
const keyword ref();
const list ref([{id:1,name:张三,status:正常,},{id:2,name:李四,status:正常,}, {id:3,name:王五,status:休假,}, {id:4,name:林六,status:休假,}, {id:5,name:徐七,status:休假,}
]);
const filteredList computed((){return list.value.filter(itemitem.name.includes(keyword.value))
})/script
style langscss scoped
.page-container {width: 300px;height: 300px;.list{display: flex;span{span{margin-left:20px;}}}
}
/style 同理多条件时只是修改计算属性中的逻辑运算即可
templatediv classpage-containerel-input v-modelkeyword placeholder请输入关键字/el-inputel-radio-group v-modelstatusel-radio :label全部全部/el-radioel-radio :label正常正常/el-radioel-radio :label休假休假/el-radio/el-radio-groupdiv classlist v-foritem in filteredList :keyitem.idspan{{ item.id }}/spanspan{{ item.name }} /spanspan{{ item.status }}/span/div/div
/templatescript langts setup
const keyword ref();
const statusref(正常)
const list ref([{id:1,name:张三,status:正常,},{id:2,name:李四,status:正常,}, {id:3,name:王五,status:休假,}, {id:4,name:林六,status:休假,}, {id:5,name:徐七,status:休假,}, {id:6,name:徐八,status:正常,}
]);
const filteredList computed((){let baseConditionitemitem.name.includes(keyword.value);let conditionbaseCondition;if(status.value!全部){conditionitembaseCondition(item) item.statusstatus.value}return list.value.filter(condition)
})/script
style langscss scoped
.page-container {width: 300px;height: 300px;.list{display: flex;span{span{margin-left:20px;}}}
}
/style 2 子组件中多选来自父组件的列表
思路来自父组件的列表可以认为是无分页列表先在子组件中复制一份追加check属性然后在list中绑定 不正确的处理(修改props) 1 在子组件中给props中的list追加check属性绑定list 2 在父组件中给list追加check属性子组件绑定list这样点击checkbox依然会修改props templatediv classpage-containerel-input v-modelkeyword placeholder请输入关键字/el-inputel-radio-group v-modelstatusel-radio :label全部全部/el-radioel-radio :label正常正常/el-radioel-radio :label休假休假/el-radio/el-radio-groupdiv classlist v-foritem in filteredList :keyitem.idel-checkbox v-modelitem.check /el-checkboxspan{{ item.id }} /spanspan{{ item.name }} /spanspan{{ item.status }} /span/div/div
/templatescript langts setup
const keyword ref();
const status ref(全部);
const props defineProps({list: {type: Array,default: () [{id: 1,name: 张三,status: 正常,},{id: 2,name: 李四,status: 正常,},{id: 3,name: 王五,status: 休假,},{id: 4,name: 林六,status: 休假,},{id: 5,name: 徐七,status: 休假,},{id: 6,name: 徐八,status: 正常,},],},
});const copyList ref(props.list.map((item) ({...item,check: false,}))
);const filteredList computed((){let baseConditionitemitem.name.includes(keyword.value);let conditionbaseCondition;if(status.value!全部){conditionitembaseCondition(item) item.statusstatus.value}return copyList.value.filter(condition)
})watch(filteredList.value, (val, old) {console.log(val, val.filter((item) item.check).map((item) item.id));emit(selectionChange,val.filter((item) item.check).map((item) item.id));
});const emit defineEmits([selectionChange]);
/script
style langscss scoped
.page-container {width: 300px;height: 300px;.list {display: flex;.el-checkbox,span { span {margin-left: 20px;}}}
}
/style
