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

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

允许一种排序，多种搜索条件

包括三种类别，添加了solt插槽，也可以自定义：

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

目录

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

先上效果图

标签tags使用方法 creditManage.vue

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

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

标签tags代码 tagsCont.vue

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

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

<template><div class="tags-cont"><el-tagv-if="sortData.sortType"type="info"style="margin-right: 0;"closable@close="closeSortTag">{{ sortData.sortBy == '0' ? '升序：': '降序：' }}{{ sortData.sortName }}</el-tag><el-tagv-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: {// 关闭排序tagcloseSortTag() {this.$emit('closeSortTag')},// 关闭 tagcloseTag(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.$mit('creditManage/setTagsList', tag)this.getTableData()},addSortTags(tag) {this.$mit('creditManage/setSortData', tag)this.getTableData()},getTableData() {this.$store.dispatch('creditManage/handleGetTableList', {})}</script>

搜索弹出框代码 selectCont.vue

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

<template><div><el-popoverv-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><!-- input 搜索 --><div v-if="type ==='input'" class="main-cont"><el-input :placeholder="'输入'+header" v-model="keyword" size="mini" type="text" class="input-style"/></div><!-- CheckBox 多选 --><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><!-- fromTo 搜索 --><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 {// 提交 fromTothis.$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 = valthis.isIndeterminate = valthis.checkedSelects = val ? (() => {const selects = []this.selectList.map(select => {selects.push(select)})return selects})() : []},handleCheckedSelectsChange(value) {const checkedCount = value.lengththis.checkAll = checkedCount === this.selectList.lengththis.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()单个删除 tagsfilterKeyword()通过tag遍历搜索关键字

/*** 添加tags* @param state* @param tag*/const setTagsList = (state, tag) => {// 已存在标签 = 修改const isHave = state.tagsList.some(t => {if (t.sortType === tag.sortType) {t.keyword = tag.keywordif (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].selectNameshowName.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 + ':' + showNameconsole.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 })}}}// 单个删除 tagsconst 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 => {// 判断多选时，遍历取idif (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] = tableListstate.totalCount = totalCount},setSortData(state, sortData) {state.sortData = sortData},setTagsList(state, tag) {setTagsList(state, tag)},// 删除单个tagremoveTag(state, tag) {removeTag(state, tag)},cleanTags(state) {state.tagsList = []state.sortData = {}}}/*** @description 表格 tag 搜索 state 方法* @function filterKeyword,mutations*/export default {filterKeyword,mutations}