“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”
Reference links:
→ 【 Vue EL-Table header search (filter) function implementation analysis (zero) 】
Effect: table header search
Instead of calling the table header search subcomponent method directly, we can write: If edC-search is directly written as edC-search, and the content structure of the table is inconsistent with that of EDC-search, edC-search cannot be directly used as edC-search. If only EDC-search is written separately, due to the dynamic rendering time of the page, As a result, the two search fields are displayed at the end of the table, and the table fields are displayed in incorrect order. Therefore, you need to configure the search fields in the table header corresponding to the table and perform subsequent fuzzy query.
Article is about the form of regular columns and custom columns, they may have a better component, this article is for ordinary column to write (at that time didn’t think too much), and want to custom columns need to modify this article’s code, if you don’t want to change, in this paper, the custom of column can only through the formatter to format the content.
Added table header search for a column in 1EL-table
2.1 Writing of table header search component:
A single column search
Part of the code
This is called the EDC_search component
<el-table ref="tableData" :data="tableData" :height="tableheight" default-expand-all row-key="sysResourcesId" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" style="width:100%; margin:0 auto 5px; The font - size: 0.8 rem. "" v-loading="loading" highlight-current-row>
<el-table-column show-overflow-tooltip min-width="100" prop="sortNum" label="Sort number" align="left"></el-table-column>
<el-table-column show-overflow-tooltip prop="resourcesCode" label="Code" align="left" min-width="100">
<! -- -->
<template #header v-if="headerItem.seach">
<el-popover v-if="headerItem.seachSetting.type==='Input'" placement="bottom" trigger="click" width="200" v-model="headerItem.visible">
<el-input autofocus clearable @clear="clearSearch(headerItem)" style="width: 200px" size="small" v-model="headerItem.seachSetting.value" :placeholder="' Please enter '+headerItem.label" @keyup.enter.native="todoSearchItself(headerItem)" />
<el-button size="small" style="margin-top: 10px; float: left; width: 47%" @click="clearSearchItself(headerItem)">Heavy set</el-button>
<el-button size="small" type="primary" style="margin-top: 10px; float: right; width: 47%" @click="todoSearchItself(headerItem)">search</el-button>
<div style="display: flex; align-items: center" slot="reference">
<span class="search-title">{{ headerItem.label }}</span>
<img style="width: 13px; margin-left: 10px; cursor: pointer" :src="headerItem.seachSetting.value&&headerItem.seachSetting.value! = = ' '? img2:img1" />
</div>
</el-popover>
</template>
<! -- -->
<template slot-scope="scope">
<span>{{scope.row.resourcesCode}}</span>
</template>
</el-table-column>
<! <el-table-column show-overflow-tooltip prop="resourcesCode" label=" code "align="left" min-width="100"> <template slot-scope="scope"> <span>{{scope.row.resourcesCode}}</span> </template> </el-table-column> -->
<el-table-column show-overflow-tooltip prop="icon" min-width="100" label="Icon" align="left">
<template slot-scope="scope">
<el-tooltip :content="scope.row.icon" placement="top">
<i class="textItem iconfont">{{ scope.row.icon }}</i>
</el-tooltip>
</template>
</el-table-column>
<el-table-column show-overflow-tooltip prop="resourcesName" label="Menu name" align="left" min-width="150">
<! -- -->
<template #header v-if="headerItem2.seach">
<el-popover v-if="headerItem2.seachSetting.type==='Input'" placement="bottom" trigger="click" width="200" v-model="headerItem2.visible">
<el-input autofocus clearable @clear="clearSearch(headerItem2)" style="width: 200px" size="small" v-model="headerItem2.seachSetting.value" :placeholder="' Please enter '+ HeaderItem2.label" @keyup.enter.native="todoSearchItself(headerItem2)" />
<el-button size="small" style="margin-top: 10px; float: left; width: 47%" @click="clearSearchItself(headerItem2)">Heavy set</el-button>
<el-button size="small" type="primary" style="margin-top: 10px; float: right; width: 47%" @click="todoSearchItself(headerItem2)">search</el-button>
<div style="display: flex; align-items: center" slot="reference">
<span class="search-title">{{ headerItem2.label }}</span>
<img style="width: 13px; margin-left: 10px; cursor: pointer" :src="headerItem2.seachSetting.value&&headerItem2.seachSetting.value! = = ' '? img2:img1" />
</div>
</el-popover>
</template>
<! -- -->
<template slot-scope="scope">
<el-tooltip :content="scope.row.resourcesName" placement="top">
<span class="textItem">{{ scope.row.resourcesName }}</span>
</el-tooltip>
</template>
</el-table-column>
<! <el-table-column show-overflow-tooltip prop="resourcesName" label=" menu name "align="left" min-width="150"> <template slot-scope="scope"> <el-tooltip :content="scope.row.resourcesName" placement="top"> <span class="textItem">{{ scope.row.resourcesName }}</span> </el-tooltip> </template> </el-table-column> -->
Copy the code<el-table-column show-overflow-tooltip prop="resourcesName" label="Menu name" align="left" min-width="150">
<! -- -->
<template #header v-if="headerItem2.seach">
<el-popover v-if="headerItem2.seachSetting.type==='Input'" placement="bottom" trigger="click" width="200" v-model="headerItem2.visible">
<el-input autofocus clearable @clear="clearSearch(headerItem2)" style="width: 200px" size="small" v-model="headerItem2.seachSetting.value" :placeholder="' Please enter '+ HeaderItem2.label" @keyup.enter.native="todoSearchItself(headerItem2)" />
<el-button size="small" style="margin-top: 10px; float: left; width: 47%" @click="clearSearchItself(headerItem2)">Heavy set</el-button>
<el-button size="small" type="primary" style="margin-top: 10px; float: right; width: 47%" @click="todoSearchItself(headerItem2)">search</el-button>
<div style="display: flex; align-items: center" slot="reference">
<span class="search-title">{{ headerItem2.label }}</span>
<img style="width: 13px; margin-left: 10px; cursor: pointer" :src="headerItem2.seachSetting.value&&headerItem2.seachSetting.value! = = ' '? img2:img1" />
</div>
</el-popover>
</template>
<! -- -->
<template slot-scope="scope">
<el-tooltip :content="scope.row.resourcesName" placement="top">
<span class="textItem">{{ scope.row.resourcesName }}</span>
</el-tooltip>
</template>
</el-table-column>
Copy the code<script>
export default {
data () {
seachForm: {},
headerItem: { // For the original format, see the next article
label: 'coding'.prop: 'resourcesCode'.width: '140'.seach: true.seachSetting: {
type: 'Input'.value: ' '}},headerItem2: {
label: 'Menu name'.prop: 'resourcesName'.width: '140'.seach: true.seachSetting: {
type: 'Input'.value: ' '}},seachFormItself: {}},methods: {// Own button search click, reset clear operation
todoSearchItself (headerItem) {
headerItem.visible = false
if (headerItem.seachSetting.type === 'Input') {
this.seachFormItself[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== ' ' ? headerItem.seachSetting.rename : headerItem.prop] = headerItem.seachSetting.value
}
this.todoSearch(this.seachFormItself)
},
clearSearchItself (headerItem) {
if (headerItem.seachSetting && headerItem.seachSetting.type) {
headerItem.visible = false
if (headerItem.seachSetting.type === 'Input') {
headerItem.seachSetting.value = ' '
this.seachFormItself[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== ' ' ? headerItem.seachSetting.rename : headerItem.prop] = ' '
}
this.clearSearch(this.seachFormItself)
}
},
// Trigger method - action
clearSearch (val) {
console.log('empty - clearSearch', val)
this.pageNum = 1
this.pageSize = 10
this.seachForm = val
this.computedTableData()
},
todoSearch (val) {
console.log('val---todoSearch', val)
this.pageNum = 1
this.pageSize = 10
this.seachForm = val
this.computedTableData()
},}
}
Copy the code2.2 Header search component call
Edc-table is a table component that can put things inside the table, as shown in the following code
<el-row class="contant"
style="width: 100%;">
<edc-table v-loading="editLoading"
:data="users"
:currentPage="page.pageNum"
:total="totalCou"
:height="tableheight"
show-overflow-tooltip
:pagesize="page.pageSize"
@current-change="currentChange"
@size-change="sizeChange">
<el-table-column show-overflow-tooltip
label="Operation"
width="180">
<div slot-scope="scope"
class="el_Handel">
<span size="mini"
type="primary"
@click.stop="entryQuestions(scope.row)"
class="el_enterIn">entry</span>
<span class="shuxian"
v-if="$route.path! =='/memberList'">|</span>
<span size="mini"
type="primary"
@click.stop="handleEditIcon(scope.row,scope.$index)"
v-if="$route.path! =='/memberList'"
class="el_Edit">The editor</span>
<span class="shuxian"
v-if="$route.path! =='/memberList'">|</span>
<span size="mini"
type="primary"
@click.stop="handleDelete(scope.row,scope.$index)"
:disabled="disabaled"
v-if="$route.path! =='/memberList'"
class="el_Del">delete</span>
</div>
</el-table-column>
<edc_Seach :tableData="headerData"
@search="todoSearch"
@clearSearch="clearSearch"></edc_Seach>
</edc-table>
</el-row>
Copy the codeSeparate type configuration ↓ based on table header requirements
headerData: [
/ / {
// type: 'index', // index is the index; Selection Multiple selection boxes
// width: 50
// },
{
label: 'Entry Date'.prop: 'nrrq'.width: 120.seach: true.// Set this to true with a search, and write the following seachSetting object (if there is a search, it must be written)
seachSetting: { // The configuration item searched in the table header
type: 'DatePicker'.// Input is the Input box; Range is the interval input; Cascader is the cascade selector; DatePicker year month day interval; TimePicker time minute-second interval; DateTimePicker Year month day hour minute second interval
value: ' '.// The value of the search box, mandatory! Value is usually used; Only the Range uses the following maximum and minimum values, not value
// value: [], // only used for Cascader cascade searches
// minVal: '', // only used in Range
// maxVal: '', // only used in Range
rename: 'createDate' // Change the name of the search criteria passed to the background}}, {label: 'age'.prop: 'age'.width: 80.seach: true.seachSetting: {
type: 'Range'.minVal: ' '.maxVal: ' '}}, {label: Date of birth.prop: 'mbirthday'.width: 120.seach: true.seachSetting: {
type: 'DatePicker'.value: ' '.rename: 'birthDay'}}, {label: 'Mobile phone Number'.prop: 'mPhone'.// width: 150,
seach: true.seachSetting: {
type: 'Input'.value: ' '}}, {label: 'Follow-up status'.prop: 'flowUpStatus'.width: 120.seach: true.seachSetting: {
type: 'Selects'.value: ' '.options: [].rename: 'flowUpStatusList'}}/* {label: 'location ', prop: 'treeStr', width: '160', seach: true, seachSetting: {// config type: 'Cascader', value: [], // Note that the value of the cascade is an array. The value returned to the background has been formatted as the last value of the array, which is a string format. Options: [// Cascade selector options {value: 'zhinan', label: 'guide ', children: [{value:' Shejiyuanze ', label: 'design principle ', children: [{value: 'yizhi', label: 'same'}]}], props: {// props value: 'value', 'label', children: 'children', checkStrictly: true, // Can be selected at all levels, not all the way to the last configuration expandTrigger: Hover /click}}, {label: 'detailed address', prop: 'address', width: 150}, {label:' remarks ', prop: 'bz', width: 150 } */].Copy the codeBut there are some problems. It’s not perfect
At present, this only applies to fixed tables, not tables (internal tables are not suitable for use, there will be problems such as table header positioning refresh), and can not set the table header echo, etc