点击对默认查询条件之外的条件进行 增加或删除
在使用的组件或标签加入:filtrateList="filtrateList"传入条件查询数组
当前demo写在xk-page中,就以xk-page组件为例
<xk-upage
:filtrateList="filtrateList"
:queryArr="queryArr"></xk-upage>
属性
| 属性参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| filtrateList | 需要筛选的查询条件 | Array | //可选值说明可看xk-upage组件 | [] |
| treeRef | 定义ref | String | - | tree |
computed计算属性
| computed方法中属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| ...mapGetters(['customCondition']) | 获取最新的查询条件列表 | Array | - | [ ] |
| ...mapState({ | 获取默认的查询条件列表 | Array | - | [ ] |
watch监听
| watch方法中属性 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| watch: { | 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-input
placeholder="搜索过滤条件"
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-checkbox
node-key="key"
:default-checked-keys="defaultCheckKyes"
:props="defaultProps"
@check="handleCheck"
:filter-node-method="filterNode"
@check-change="treeNodeClick"
>
</el-tree>
</el-card>
<xk-svg-icon
class="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
// 过滤默认选中的key
for (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>
