vue筛选框封装-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue筛选框封装。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

点击对默认查询条件之外的条件进行增加或删除

在使用的组件或标签加入:filtrateList="filtrateList"传入条件查询数组

当前demo写在xk-page中,就以xk-page组件为例

<xk-upage
:filtrateList="filtrateList"
:queryArr="queryArr"></xk-upage>

属性

属性参数	说明	类型	可选值	默认值
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-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查询条件类型入参才能完整显示文章来源地址https://www.toymoban.com/news/detail-543350.html

 <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>

到了这里，关于vue筛选框封装的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！