elementUI table自定义表头弹框搜索，排序，显示tag标签

迷南。 2023-02-21 11:59 39阅读 0赞

elementUI table自定义表头弹框搜索，排序，显示tag标签  
允许一种排序，多种搜索条件  
包括三种类别，添加了solt插槽，也可以自定义：

*  输入框\[input\]
 *  多选\[checkbox\]
 *  范围值\[from-to\]

### 目录 ###

*   *  先上效果图
     *  标签tags使用方法 creditManage.vue
     *  标签tags代码 tagsCont.vue
     *  搜索弹出框使用方法 creditManage.vue
     *  搜索弹出框代码 selectCont.vue
     *  store中代码 creditManage.js
     *  utils/tags.js 代码

## 先上效果图 ##

![在这里插入图片描述][20200630160723517.gif]

## 标签tags使用方法 creditManage.vue ##

*  绑定普通标签数据`tagsList`
 *  绑定排序数据`sortData`
 *  绑定关闭排序标签方法`closeSortTag`
 *  绑定关闭单个普通标签方法`closeTag`

<tagsCont :tags-list="tagsList" :sort-data="sortData" @closeSortTag="closeSortTag" @closeTag="closeTag"/>
    <script> //关闭方法 closeTag(tag) { this.$store.commit('creditManage/removeTag', tag) this.getTableData() }, closeSortTag() { this.$store.commit('creditManage/setSortData', { }) this.getTableData() }, getTableData() { this.$store.dispatch('creditManage/handleGetTableList', { }) } </script>

## 标签tags代码 tagsCont.vue ##

只有一个排序，所以将排序标签和普通标签分开展示

*  绑定关闭单个标签方法`closeTag(tag)`
 *  绑定关闭排序标签方法`closeSortTag`

<template>
      <div class="tags-cont">
        <el-tag v-if="sortData.sortType" type="info" style="margin-right: 0;" closable @close="closeSortTag">
          {
       { sortData.sortBy == '0' ? '升序：': '降序：' }}
          {
       { sortData.sortName }}
        </el-tag>
        <el-tag v-for="tag in tagsList" :key="tag.sortType" type="info" closable @close="closeTag(tag)">
          {
       { tag.showName }}
        </el-tag>
      </div>
    </template>
    
    <script> export default { name: 'tagsCont', props: { tagsList: { type: Array, default() { } }, sortData: { type: Object, default() { } } }, data() { return { } }, methods: { // 关闭排序tag closeSortTag() { this.$emit('closeSortTag') }, // 关闭 tag closeTag(tag) { this.$emit('closeTag', tag) } } } </script>
    
    <style lang="less" scoped> .tags-cont{ white-space: normal; /deep/ .el-tag{ margin-right: 5px; margin-bottom: 2px; border-radius: 12px; height: 22px; line-height: 22px; } /deep/ .el-tag.el-tag--info{ color: #283550; } /deep/ .el-tag .el-icon-close { font-size: 18px; height: 18px; width: 18px; } /deep/ .el-tag.el-tag--info .el-tag__close:hover { background-color: #17CAAA; } } </style>

## 搜索弹出框使用方法 creditManage.vue ##

通过 绑定type区分搜索的方式【input，checkbox，fromTo】

*  `header="姓名"` 弹出层中“请输入姓名”，tags中“姓名：XX”
 *  `sort-type="studentName"` 排序和搜索的关键字，判断是否标签存在的关键字，最终搜索遍历取的值
 *  `type="input"` 弹框的类型【input,checkbox,fromTo】三种类型，添加了slot插槽也可自定义
 *  `@addTags="addTags"` 添加普通标签方法
 *  `@addSortTags="addSortTags"`添加排序标签方法

<el-table-column prop="studentName" min-width="100">
      <template slot="header" slot-scope="scope">
        <selectContent header="姓名" sort-type="studentName" type="input" @addTags="addTags" @addSortTags="addSortTags"/>
      </template>
    </el-table-column>
    <el-table-column prop="unitName" label="站点" min-width="120">
      <template slot="header" slot-scope="scope">
        <selectContent :select-list="unitSelectList" header="站点" sort-type="unitId" type="checkbox" @addTags="addTags" @addSortTags="addSortTags"/>
      </template>
    </el-table-column>
    <el-table-column prop="credit" min-width="120" align="center">
      <template slot="header" slot-scope="scope">
        <selectContent justify-content="center" header="已修学分" sort-type="credit" type="fromTo" @addTags="addTags" @addSortTags="addSortTags"/>
      </template>
    </el-table-column>
    
    <script> // 添加tag 方法 addTags(tag) { this.$store.commit('creditManage/setTagsList', tag) this.getTableData() }, addSortTags(tag) { this.$store.commit('creditManage/setSortData', tag) this.getTableData() }, getTableData() { this.$store.dispatch('creditManage/handleGetTableList', { }) } </script>

## 搜索弹出框代码 selectCont.vue ##

*  排序 0升序 1降序
 *  `justifyContent` 表头的对齐方式， 如果表头设置居中可设置 `center`

<template>
      <div>
        <el-popover v-model="visible" width="120">
          <div class="sort-cont" @click="toSort('0')">
            <img src="../../assets/images/increase.png" class="icon-img">
            升序
          </div>
          <div class="sort-cont" @click="toSort('1')">
            <img src="../../assets/images/increase.png" class="icon-img">
            降序
          </div>
          <hr>
          <div class="sort-cont cursor-normal">
            <img src="../../assets/images/filter.png" class="icon-img">
            筛选
          </div>
          
          <div v-if="type ==='input'" class="main-cont">
            <el-input :placeholder="'输入'+header" v-model="keyword" size="mini" type="text" class="input-style"/>
          </div>
          
          <div v-if="type === 'checkbox'">
            <el-checkbox v-if="selectList.length > 0" :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <el-checkbox-group v-model="checkedSelects" @change="handleCheckedSelectsChange">
              <el-checkbox v-for="select in selectList" :label="select" :key="select.selectId">{
       { select.selectName }}</el-checkbox>
            </el-checkbox-group>
          </div>
          
          <div v-if="type ==='fromTo'" class="main-cont">
            <div class="from-to-cont">
              <div class="a-cont">从</div>
              <div class="a-cont">到</div>
            </div>
            <div class="from-to-cont">
              <div class="a-cont">
                <el-input v-model="inputFrom" size="mini" type="text"/>
              </div>
              <div class="a-cont">
                <el-input v-model="inputTo" size="mini" type="text"/>
              </div>
            </div>
          </div>
          <slot class="main-cont"/>
          <div class="btn-cont">
            <el-button size="mini" @click="closePop">取消</el-button>
            <el-button type="primary" size="mini" @click="toSelect">确定</el-button>
          </div>
          <div slot="reference" :style="{ 'justify-content': justifyContent}" class="table-header-cont">
            <slot name="header">{
       { header }}</slot>
            <img src="../../assets/images/down-circle.png" class="down-circle">
          </div>
        </el-popover>
      </div>
    </template>
    
    <script> export default { name: 'selectContent', props: { justifyContent: { type: String, default: 'flex-start' }, selectList: { type: Array, default() { return [] } }, header: { type: String, default: '' }, type: { type: String, default: 'input', required: true }, sortType: { type: String, default: '' } }, data() { return { visible: false, keyword: '', checkAll: false, checkedSelects: [], isIndeterminate: false, inputFrom: '', inputTo: '', unitSelectList: [ { selectId: '1', selectName: '贵州财经大学' }, { selectId: '2', selectName: '贵州大学' }, { selectId: '3', selectName: '贵州大学科技学院' } ] } }, mounted() { }, methods: { closePop() { this.visible = false }, // 确定按钮 toSelect() { if (this.type === 'input' && this.keyword !== '') { // 提交 input 搜索 this.$emit('addTags', { filterType: 'input', sortType: this.sortType, keyword: this.keyword, sortName: this.header }) } else if (this.type === 'checkbox' && this.checkedSelects.length > 0) { // 提交 checkbox 多选 this.$emit('addTags', { filterType: 'checkbox', sortType: this.sortType, keyword: this.checkedSelects, sortName: this.header }) } else if (this.type === 'fromTo') { if (!/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(this.inputFrom) || !/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/.test(this.inputTo)) { this.$message({ type: 'info', message: '请输入数字' }) } else { // 提交 fromTo this.$emit('addTags', { filterType: 'fromTo', sortType: this.sortType, keyword: this.inputFrom + '~' + this.inputTo, sortName: this.header }) } } this.closePop() }, // 排序 0升 1降 toSort(t) { this.$emit('addSortTags', { sortBy: t, sortType: this.sortType, sortName: this.header }) this.closePop() }, handleCheckAllChange(val) { this.checkAll = val this.isIndeterminate = val this.checkedSelects = val ? (() => { const selects = [] this.selectList.map(select => { selects.push(select) }) return selects })() : [] }, handleCheckedSelectsChange(value) { const checkedCount = value.length this.checkAll = checkedCount === this.selectList.length this.isIndeterminate = checkedCount > 0 && checkedCount < this.selectList.length } } } </script>
    
    <style scoped lang="less"> .cell > div { height: 100%; display: block; } .sort-cont { display: flex; align-items: center; height: 25px; cursor: pointer; .icon-img { margin: 0 5px; height: 16px; width: 16px; } } .cursor-normal{ cursor: default; } .table-header-cont { display: flex; align-items: center; cursor: pointer; .down-circle { margin-left: 5px; height: 16px; width: 16px; } } .main-cont{ padding: 5px; .input-style{ margin: 5px 0; } .from-to-cont{ display: flex; justify-content: space-between; .a-cont{ width: 45%; } } } .btn-cont{ display: flex; justify-content: center; margin-top: 5px; } th div:focus{ outline: 0; } /deep/ .el-checkbox__label{ width: 135px; text-overflow: ellipsis; overflow-x: hidden; vertical-align: top; } </style>

## store中代码 creditManage.js ##

import tags from '../../utils/tags'
    
    const creditManage = { 
      namespaced: true,
      state: { 
        // 排序数据
        sortData: { },
        // tags 数据， 不包括排序字段 下面是 tagsList 各种类型的数据展示
        // [ 
        // {"filterType":"input","sortType":"studentName","keyword":"小王","sortName":"姓名","showName":"姓名:小王"},
        // {"filterType":"fromTo","sortType":"credit","keyword":"60~100","sortName":"已修学分","showName":"已修学分:60~100"},
        // {"filterType":"checkbox","sortType":"unitId","keyword":[{"selectId":"76","selectName":"北京站"}],"sortName":"站点","showName":"站点:北京站"}
        // ]
        tagsList: []
      },
      mutations: { 
      	// tags.js 中引入方法
        ...tags.mutations
      },
      actions: { 
        // 查询获取表格数据
        handleGetTableList({  commit, state }, { }) { 
          // 通过tag遍历搜索关键字 tags.js中方法
          const selectKeyword = tags.filterKeyword(state.tagsList)
          console.log(selectKeyword)
          // 请求接口 获取查询数据
          Api.stuCreditList({ 
            sortBy: state.sortData.sortBy,
            sortType: state.sortData.sortType,
            studentNameKeyword: selectKeyword.studentName,
            studentStatusNoKeyword: selectKeyword.studentStatusNo,
            creditStartIndex: selectKeyword.startIndex,
            creditEndIndex: selectKeyword.endIndex,
            unitIdList: selectKeyword.unitId
          }).then(res => { 
            if (res.retcode == '0') { 
            // 为了组件通用，提交数据后转换字段名
              commit('setTableList', { 
              	tableName: 'creditList',
              	tableList: res.learnInfoList,
              	totalCount: res.totalCount
          	  })
            }
          })
        }
      }
    }
    
    export default creditManage

## utils/tags.js 代码 ##

*  `setTagsList()` 添加tags【存在标签修改，不存在时添加】
 *  `removeTag()` 单个删除 tags
 *  `filterKeyword()` 通过tag遍历搜索关键字

/** * 添加tags * @param state * @param tag */
    const setTagsList = (state, tag) => { 
      // 已存在标签 = 修改
      const isHave = state.tagsList.some(t => { 
        if (t.sortType === tag.sortType) { 
          t.keyword = tag.keyword
          if (tag.filterType === 'input') { 
            // input搜索 可直接展示
            t.showName = tag.sortName + ':' + tag.keyword
          } else if (tag.filterType === 'checkbox') { 
            // CheckBox多选 需要截取展示
            let showName = ''
            // 选中一个 不加逗号
            tag.keyword.length > 1
              ? (tag.keyword || []).map(k => { 
                showName += k.selectName + ','
              })
              : showName = tag.keyword[0].selectName
            showName.length > 15
              ? t.showName = tag.sortName + ':' + showName.slice(0, 15) + '...'
              : t.showName = tag.sortName + ':' + showName
          } else if (tag.filterType === 'fromTo') { 
            t.showName = tag.sortName + ':' + tag.keyword
          }
        }
        return t.sortType === tag.sortType
      })
      // 不存在标签 = 添加
      if (!isHave) { 
        // input 输入搜索
        if (tag.filterType === 'input') { 
          state.tagsList.push({  filterType: tag.filterType, sortType: tag.sortType, keyword: tag.keyword, sortName: tag.sortName, showName: tag.sortName + ':' + tag.keyword })
        } else if (tag.filterType === 'checkbox') { 
          // checkbox 多选搜索
          let showName = ''
          let sortName = ''
          // 选中一个 不加逗号
          tag.keyword.length > 1
            ? (tag.keyword || []).map(k => { 
              showName += k.selectName + ','
            })
            : showName = tag.keyword[0].selectName
          // length < 15 不加...
          showName.length > 15
            ? sortName = tag.sortName + ':' + showName.slice(0, 15) + '...'
            : sortName = tag.sortName + ':' + showName
          console.log(tag)
          state.tagsList.push({  filterType: tag.filterType, sortType: tag.sortType, keyword: tag.keyword, sortName: tag.sortName, showName: sortName })
        } else if (tag.filterType === 'fromTo') { 
          state.tagsList.push({  filterType: tag.filterType, sortType: tag.sortType, keyword: tag.keyword, sortName: tag.sortName, showName: tag.sortName + ':' + tag.keyword })
        }
      }
    }
    // 单个删除 tags
    const removeTag = (state, tag) => { 
      state.tagsList.forEach((t, index) => { 
        if (t.sortType === tag.sortType) { 
          state.tagsList.splice(index, 1)
        }
      })
    }
    
    /** * 通过tag遍历搜索关键字 * @param tagsList * @returns { {}} */
    const filterKeyword = (tagsList) => { 
      const selectKeyword = { }
      tagsList.map(k => { 
        // 判断多选时，遍历取id
        if (k.filterType === 'checkbox') { 
          const selectList = []
          k.keyword.map(kk => { 
            selectList.push(kk.selectId)
          })
          selectKeyword[k.sortType] = selectList
        } else if (k.filterType === 'fromTo') { 
          selectKeyword['startIndex'] = k.keyword.split('~')[0]
          selectKeyword['endIndex'] = k.keyword.split('~')[1]
        } else { 
          // 非多选时直接赋值
          selectKeyword[k.sortType] = k.keyword
        }
      })
      return selectKeyword
    }
    
    /** * @description mutations方法 * @function setCurrentPage,setTableList,setSortData,setTagsList,removeTag,cleanTags */
    const mutations = { 
      setCurrentPage(state, currentPage) { 
        state.currentPage = currentPage
      },
      setTableList(state, {  tableName, tableList = [], totalCount }) { 
        state[tableName] = tableList
        state.totalCount = totalCount
      },
      setSortData(state, sortData) { 
        state.sortData = sortData
      },
      setTagsList(state, tag) { 
        setTagsList(state, tag)
      },
      // 删除单个tag
      removeTag(state, tag) { 
        removeTag(state, tag)
      },
      cleanTags(state) { 
        state.tagsList = []
        state.sortData = { }
      }
    }
    
    /** * @description 表格 tag 搜索 state 方法 * @function filterKeyword,mutations */
    export default { 
      filterKeyword,
      mutations
    }

[20200630160723517.gif]: https://img-blog.csdnimg.cn/20200630160723517.gif