属性

属性参数	说明	类型	可选值	默认值
filtrateList	需要筛选的查询条件	Array	//可选值说明可看xk-upage组件 { name: '报废名称(默认)', key: 'pointScrapName', disabled: true, checked: true, type: 'input', plaholder: '报废单名称' }	[]
treeRef	定义ref	String	-	tree

computed计算属性

computed方法中属性	说明	类型	可选值	默认值
...mapGetters(['customCondition'])	获取最新的查询条件列表	Array	-	[ ]
...mapState({ defultCheck: (state) => state.taskManage.defultCheck })	获取默认的查询条件列表	Array	-	[ ]

watch监听

watch方法中属性	说明	类型	可选值	默认值
watch: { customCondition: { deep: true, handler (list) { const newData = this.defultCheck.concat(list) this.$set(this, 'queryArr', [...new Set(newData)]) } } }	customCondition方法来自计算属性所定义	Object	-	-

组件原码:

<template><el-popover placement="top-start" width="200" trigger="hover"><el-card class="box-card" shadow="never"><div slot="header" class="clearfix"><el-inputplaceholder="搜索过滤条件"v-model.trim="filterText"size="small"><i slot="suffix" class="el-icon-search" @click="handleSearch"></i></el-input></div><el-tree:ref="treeRef":data="setFiltrateList"show-checkboxnode-key="key":default-checked-keys="defaultCheckKyes":props="defaultProps"@check="handleCheck":filter-node-method="filterNode"@check-change="treeNodeClick"></el-tree></el-card><xk-svg-iconclass="filtrate"iconClass="shaixuan1"slot="reference"></xk-svg-icon></el-popover>
</template><script>
import { mapMutations } from 'vuex'export default {name: 'XkFiltrate',inject: ['headerFrom'],props: {filtrateList: {// 筛选列表type: Array,default: () => []},treeRef: {type: String,default: 'tree'}},data () {return {filterText: '',setFiltrateList: [],defaultCheckKyes: [], // 默认选中defaultProps: {children: 'children',label: 'name'}}},methods: {...mapMutations({setCustomCondition: 'taskManage/CUSTOM_CONDITION'}),handleSearch () {console.log('点击搜索--暂时没做需求', this.filterText)},// 触发的节点数组handleCheck (data, checkedData) {// console.log('data, checkedData, =>', data, checkedData)this.setCustomCondition(checkedData.checkedNodes)},// 过滤节点filterNode (value, data) {if (!value) {return true}return data.label.indexOf(value) !== -1},treeNodeClick (item, node, self) {const checkedData = this.$refs[this.treeRef].getCheckedKeys()// 对取消选中的值进行清空if (checkedData.indexOf(item.key) == -1) {for (const key in this.headerFrom) {if (Object.hasOwnProperty.call(this.headerFrom, key)) {if (item.key == key) {this.headerFrom[key] = null}}}}}},watch: {filtrateList: {immediate: true,handler (list) {if (list.length > 0) {const allList = list.map((items) => {const index =items.name.lastIndexOf('(') || items.name.lastIndexOf('（')return {...items,name: index < 0 ? items.name : items.name.substring(0, index),label: items.name,value: items.key}})this.setFiltrateList = allList// 过滤默认选中的keyfor (const i in this.setFiltrateList) {if (this.setFiltrateList[i].checked) {this.defaultCheckKyes.push(this.setFiltrateList[i].key)}}}}},// input文本过滤触发filterText (val) {this.$refs[this.treeRef].filter(val)}}
}
</script><style scoped lang="scss">
.filtrate {cursor: pointer;
}
.box-card {border: none;.el-card__body {padding: 0;}
}
.clearfix {::v-deep .el-input__suffix {display: flex;align-items: center;cursor: pointer;}
}
</style>

vuex:这里采用的是模块化,需求的百度了解下

const state = {customCondition: [], // 自定义条件数据defultCheck: [] // 默认选中数据
}const mutations = {CUSTOM_CONDITION: (state, list) => {// 默认选中的数数state.defultCheck = list.filter((item) => item.checked)state.customCondition = list.filter((item) => !item.checked)}
}const actions = {
}export default {namespaced: true,state,mutations,actions
}

demo:

注:

filtrateList定义的数组内容来自table列,具体根据需求,属性要根据xk-form查询条件类型入参才能完整显示

 <xk-upage:filtrateList="filtrateList":queryArr="queryArr"></xk-upage><script>
import { mapGetters, mapState } from 'vuex'
export default {name: 'example',data () {return {dialogShow: false,queryArr: [{type: 'input',key: 'pointScrapName',name: '报废名称',plaholder: '报废单名称'},{type: 'select',key: 'registerUserId',name: '选择人员',plaholder: '选择人员',options: []},{type: 'select',key: 'state',plaholder: '状态',name: '状态',options: [{ label: '待审核', value: '待审核' },{ label: '已通过', value: '已通过' }]}],tableHeader: [{label: '标准名称',prop: 'pointScrapNo',type: 'link',emit: 'handleLink'},{ label: '标准编号', prop: 'pointScrapName' },{label: '创建时间',prop: 'registerUserName'},{ label: '备注', prop: 'createTime' },{label: '状态',prop: 'switch',type: 'state' // disabled: false},{label: '操作',type: 'operator',btn: [{ name: '编辑', show: true, emit: 'examine' },{ name: '删除', show: true, emit: 'audit' }]}],tableData: [],// 自定义查询列表filtrateList: [{name: '报废名称(默认)',key: 'pointScrapName',disabled: true,checked: true,type: 'input',plaholder: '报废单名称'},{key: 'registerUserId',name: '选择人员(默认)',plaholder: '选择人员',disabled: true,checked: true,type: 'select',options: []},{type: 'select',key: 'state',plaholder: '状态',name: '状态(默认)',options: [{ label: '待审核', value: '待审核' },{ label: '已通过', value: '已通过' }],disabled: true,checked: true},{name: '标准名称',key: 'bznc',plaholder: '请输入标准名称',type: 'input'},{name: '标准编号',key: 'bcbh',plaholder: '请输入标准编号',type: 'input'},{name: '创建时间',key: 'cjsj',plaholder: '请输入标准编号',type: 'time'},{name: '备注',key: 'bz',plaholder: '请输入标准编号',type: 'input'}],copyArr: null}},computed: {...mapGetters(['customCondition']), // 获取最新的查询条件...mapState({defultCheck: (state) => state.taskManage.defultCheck // 获取默认的查询条件})},watch: {customCondition: {deep: true,handler (list) {const newData = this.defultCheck.concat(list)this.$set(this, 'queryArr', [...new Set(newData)])}}}
}
</script>