el-table表头搜索--表格内进行子组件调用的形式进行表头搜索-（表头搜索--区间搜索，输入框搜索，日期时间区间搜索，下拉选择多选搜索）（前面一篇文章写表格里直接进行某一列的搜索）

最新推荐文章于 2024-05-16 17:59:44 发布
最新推荐文章于 2024-05-16 17:59:44 发布
阅读量647 收藏 4
点赞数 1
分类专栏： vue+element+echarts+map
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DcTbnk/article/details/118520323
版权

表头搜索

点击查看 → vue el-table 表头搜索（筛选）功能 实现分析（零）
在这里插入图片描述

父组件调用

在这里插入图片描述

  data () {
  	return {
		headerData: [
	        {
	          label: '机构编号',
	          prop: 'orgCode',
	          seach: true,
	          seachSetting: {
	            type: 'Input',
	            value: ''
	          }
	        },
	        {
	          label: '机构名称',
	          prop: 'orgName',
	          seach: true,
	          seachSetting: {
	            type: 'Input',
	            value: ''
	          }
	        },
	        {
	          label: '项目数量上限',
	          prop: 'projectUperLimit',
	          seach: true,
	          seachSetting: {
	            type: 'Input',
	            value: ''
	          }
	        },
	        {
	          label: '有效期/年',
	          prop: 'period',
	          seach: true,
	          seachSetting: {
	            type: 'Input',
	            value: ''
	          }
	        },
	        {
	          label: '使用开始时间',
	          prop: 'useDateStart',
	          seach: true, // 带搜索就为true,写上下方seachSetting对象(有搜索必写),不要表头搜索可以直接不写此行和seachSetting配置
	          seachSetting: { // 表头搜索的配置项
	            type: 'SingleDateTimePicker', // Input为输入框;Range为区间输入;Cascader为级联选择器;DatePicker年月日区间;TimePicker时分秒区间;DateTimePicker年月日时分秒区间
	            value: '', // 搜索框的值,必填!一般都用value;只有Range区间使用下面的最大值和最小值,不用value
	            // value: [], // 只在Cascader级联搜索时使用
	            // minVal: '', // 只在Range区间时使用
	            // maxVal: '', // 只在Range区间时使用
	            rename: 'minVal' // 修改搜索条件传给后台的名称
	          }
	        },
	        {
	          label: '使用结束时间',
	          prop: 'useDateEnd',
	          seach: true, // 带搜索就为true,写上下方seachSetting对象(有搜索必写),不要表头搜索可以直接不写此行和seachSetting配置
	          seachSetting: { // 表头搜索的配置项
	            type: 'SingleDateTimePicker', // Input为输入框;Range为区间输入;Cascader为级联选择器;DatePicker年月日区间;TimePicker时分秒区间;DateTimePicker年月日时分秒区间
	            value: '', // 搜索框的值,必填!一般都用value;只有Range区间使用下面的最大值和最小值,不用value
	            // value: [], // 只在Cascader级联搜索时使用
	            // minVal: '', // 只在Range区间时使用
	            // maxVal: '', // 只在Range区间时使用
	            rename: 'maxVal' // 修改搜索条件传给后台的名称
	          }
	        }
	      ],
	    }
	 },
	 methods:{
		todoSearch (val) {
	      console.log('搜索', val)
	      this.page.pageNum = 1
	      this.page.pageSize = 10
	      this.seachForm = JSON.parse(JSON.stringify(val))
	      this.seachForm.date = {
	        minVal: val.minVal,
	        maxVal: val.maxVal
	      }
	      delete this.seachForm.minVal
	      delete this.seachForm.maxVal
	      this.searchSubmit()
	    },
	    clearSearch (val) {
	      this.page.pageNum = 1
	      this.page.pageSize = 10
	      this.seachForm = val
	      this.searchSubmit()
	    },
	}
}

清除表头查询的方法

this.headerData.forEach(itemHeader => {
	this.$refs.edcSearch.clearSearch(itemHeader)
})

附上整个表头搜索的子组件的代码

<template>
  <div>
    <template v-for="(headerItem, headerIndex) in headerData">
      <el-table-column v-if="headerItem.type&&headerItem.type!==''" :label="headerItem.type==='index'?'序号':''" :type="headerItem.type" :width="headerItem.width"></el-table-column>
      <el-table-column v-else show-overflow-tooltip :label="headerItem.label" :prop="headerItem.prop" :key="headerIndex" :width="headerItem.width">
        <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="'请输入'+headerItem.label" @keyup.enter.native="todoSearch(headerItem)" />
            <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearch(headerItem)">重 置</el-button>
            <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearch(headerItem)">搜 索</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>
          <el-popover v-if="headerItem.seachSetting.type==='Range'" placement="bottom" trigger="click" width="250" v-model="headerItem.visible">
            <div style="display:flex;align-items:center">
              <el-input autofocus clearable @clear="clearSearch(headerItem)" placeholder="最小值" v-model="headerItem.seachSetting.minVal" style="width:108px;" size="small" @keyup.enter.native="todoSearch(headerItem)"></el-input>
              <span style="padding:0 10px">至</span>
              <el-input autofocus clearable @clear="clearSearch(headerItem)" placeholder="最大值" v-model="headerItem.seachSetting.maxVal" style="width:108px;" size="small" @keyup.enter.native="todoSearch(headerItem)"></el-input>
            </div>
            <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearch(headerItem)">重 置</el-button>
            <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearch(headerItem)">搜 索</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.maxVal&&headerItem.seachSetting.maxVal!=='')||(headerItem.seachSetting.minVal&&headerItem.seachSetting.minVal!=='')?img2:img1" />
            </div>
          </el-popover>
          <el-popover v-if="headerItem.seachSetting.type==='DatePicker'" placement="bottom" trigger="click" width="350" v-model="headerItem.visible">
            <el-date-picker v-model="headerItem.seachSetting.value" type="daterange" align="right" unlink-panels key="date-picker" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="todoSearch(headerItem)" :picker-options="pickerOptions">
            </el-date-picker>
            <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearch(headerItem)">重 置</el-button>
            <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearch(headerItem)">搜 索</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>
          <el-popover v-if="headerItem.seachSetting.type==='TimePicker'" placement="bottom" trigger="click" width="350" v-model="headerItem.visible">
            <el-time-picker is-range v-model="headerItem.seachSetting.value" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" value-format="HH:mm:ss" @change="todoSearch(headerItem)">
            </el-time-picker>
            <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearch(headerItem)">重 置</el-button>
            <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearch(headerItem)">搜 索</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>
          <el-popover v-if="headerItem.seachSetting.type==='DateTimePicker'" placement="bottom" trigger="click" width="400" v-model="headerItem.visible">
            <el-date-picker v-model="headerItem.seachSetting.value" type="datetimerange" align="right" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss" @change="todoSearch(headerItem)" :picker-options="pickerOptions">
            </el-date-picker>
            <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearch(headerItem)">重 置</el-button>
            <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearch(headerItem)">搜 索</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>
          <!-- 单独选择时间的 -->
          <el-popover v-if="headerItem.seachSetting.type==='SingleDateTimePicker'" placement="bottom" trigger="click" width="220" v-model="headerItem.visible">
            <el-date-picker v-model="headerItem.seachSetting.value" type="date" align="center" placeholder="选择日期" @change="todoSearch(headerItem)" format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
            <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearch(headerItem)">重 置</el-button>
            <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearch(headerItem)">搜 索</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>
          <!--  -->
          <el-popover v-if="headerItem.seachSetting.type==='Cascader'" placement="bottom" trigger="click" width="200" v-model="headerItem.visible" style="position: relative">
            <el-cascader clearable ref="cascaderHandle" style="width: 200px" size="small" filterable key="cascader" :options="headerItem.seachSetting.options" v-model="headerItem.seachSetting.value" @change="todoSearch(headerItem)" :props="headerItem.seachSetting.props">
            </el-cascader>
            <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearch(headerItem)">重 置</el-button>
            <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearch(headerItem)">搜 索</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.length>0?img2:img1" />
            </div>
          </el-popover>
          <el-popover v-if="headerItem.seachSetting.type==='Select'" placement="bottom" trigger="click" width="200" v-model="headerItem.visible" style="position: relative">
            <el-select ref="cascaderHandle" style="width: 200px" size="small" filterable key="select" v-model="headerItem.seachSetting.value">
              <el-option
                v-for="item in headerItem.seachSetting.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearch(headerItem)">重 置</el-button>
            <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearch(headerItem)">搜 索</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.length>0?img2:img1" />
            </div>
          </el-popover>
          <el-popover v-if="headerItem.seachSetting.type==='Selects'" placement="bottom" trigger="click" width="200" v-model="headerItem.visible" style="position: relative">
            <el-select ref="cascaderHandle" style="width: 200px" size="small" filterable multiple key="select" v-model="headerItem.seachSetting.value">
              <el-option
                v-for="item in headerItem.seachSetting.options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearch(headerItem)">重 置</el-button>
            <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearch(headerItem)">搜 索</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.length>0?img2:img1" />
            </div>
          </el-popover>
<!--          <el-popover v-if="headerItem.seachSetting.type==='Select'" placement="bottom" trigger="click" width="200" v-model="headerItem.visible" style="position: relative">-->
<!--            <el-cascader clearable ref="cascaderHandle" style="width: 200px" size="small" filterable key="cascader" :options="headerItem.seachSetting.options" v-model="headerItem.seachSetting.value" @change="todoSearch(headerItem)" :props="headerItem.seachSetting.props">-->
<!--            </el-cascader>-->
<!--            <el-button size="small" style="margin-top: 10px;float: left;width: 47%" @click="clearSearch(headerItem)">重 置</el-button>-->
<!--            <el-button size="small" type="primary" style="margin-top: 10px;float: right;width: 47%" @click="todoSearch(headerItem)">搜 索</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.length>0?img2:img1" />-->
<!--            </div>-->
<!--          </el-popover>-->
        </template>
<!--        <template  slot="header" slot-scope="scope">-->
<!--          <template>-->
<!--                <span class="customize_filter" style="display:inline-block">-->
<!--                  <span style="padding-right:3px;">{{headerItem.label}}</span>-->
<!--                </span>-->
<!--          </template>-->
<!--          <template slot-scope="scope">-->
<!--            ...-->
<!--          </template>-->
<!--        </template>-->
      </el-table-column>
    </template>
  </div>
</template>
<script>
export default {
  props: ['tableData'],
  data () {
    return {
      seachForm: {},
      headerData: [],
      img1: require('./image/seachIcon.png'),
      img2: require('./image/seachLive.png'),
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick (picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.first()
    })
  },
  methods: {
    first () {
      this.headerData = this.tableData
    },
    todoSearch (headerItem) {
      headerItem.visible = false
      if (headerItem.seachSetting.type === 'Range') {
        this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = {
          minVal: headerItem.seachSetting.minVal,
          maxVal: headerItem.seachSetting.maxVal
        }
      } else if (headerItem.seachSetting.type === 'Input') {
        this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = headerItem.seachSetting.value
      } else if (headerItem.seachSetting.type === 'DatePicker' || headerItem.seachSetting.type === 'DateTimePicker' || headerItem.seachSetting.type === 'TimePicker') {
        console.log('headerItem.seachSetting.value', headerItem.seachSetting.value)
        console.log('headerItem.seachSetting.rename', headerItem.seachSetting.rename)
        if (headerItem.seachSetting.value == null) {
          headerItem.seachSetting.value = ''
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = {
            maxVal: '',
            minVal: ''
          }
        } else {
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = {
            minVal: headerItem.seachSetting.value[0],
            maxVal: headerItem.seachSetting.value[1]
          }
        }
      } else if (headerItem.seachSetting.type === 'SingleDateTimePicker') {
        console.log('headerItem.seachSetting.value', headerItem.seachSetting.value)
        console.log('headerItem.seachSetting.rename', headerItem.seachSetting.rename)
        if (headerItem.seachSetting.value == null) {
          headerItem.seachSetting.value = ''
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = ''
        } else {
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = headerItem.seachSetting.value
        }
      } else if (headerItem.seachSetting.type === 'Cascader') {
        this.$refs.cascaderHandle[0].dropDownVisible = false
        if (headerItem.seachSetting.value && headerItem.seachSetting.value.length > 0) {
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = headerItem.seachSetting.value[headerItem.seachSetting.value.length - 1]
        } else {
          headerItem.seachSetting.value = []
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = ''
        }
      } else if (headerItem.seachSetting.type === 'Select') {
        if (headerItem.seachSetting.value && headerItem.seachSetting.value.length > 0) {
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = headerItem.seachSetting.value
        } else {
          headerItem.seachSetting.value = ''
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = ''
        }
      } else if (headerItem.seachSetting.type === 'Selects') {
        if (headerItem.seachSetting.value && headerItem.seachSetting.value.length > 0) {
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = headerItem.seachSetting.value
        } else {
          headerItem.seachSetting.value = []
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = []
        }
      }
      this.$emit('search', this.seachForm, headerItem)
    },
    clearSearch (headerItem) {
      if (headerItem.seachSetting && headerItem.seachSetting.type) {
        headerItem.visible = false
        if (headerItem.seachSetting.type === 'Range') {
          headerItem.seachSetting.minVal = ''
          headerItem.seachSetting.maxVal = ''
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = {
            maxVal: '',
            minVal: ''
          }
        } else if (headerItem.seachSetting.type === 'Input') {
          headerItem.seachSetting.value = ''
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = ''
        } else if (headerItem.seachSetting.type === 'DatePicker' || headerItem.seachSetting.type === 'DateTimePicker' || headerItem.seachSetting.type === 'TimePicker') {
          headerItem.seachSetting.value = ''
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = {
            maxVal: '',
            minVal: ''
          }
        } else if (headerItem.seachSetting.type === 'SingleDateTimePicker') {
          headerItem.seachSetting.value = ''
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = ''
        } else if (headerItem.seachSetting.type === 'Cascader') {
          this.$refs.cascaderHandle[0].dropDownVisible = false
          headerItem.seachSetting.value = []
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = ''
        } else if (headerItem.seachSetting.type === 'Select') {
          headerItem.seachSetting.value = ''
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = ''
        } else if (headerItem.seachSetting.type === 'Selects') {
          headerItem.seachSetting.value = []
          this.seachForm[headerItem.seachSetting.rename && headerItem.seachSetting.rename !== '' ? headerItem.seachSetting.rename : headerItem.prop] = []
        }
        this.$emit('clearSearch', this.seachForm)
      }
    }
  }
}
</script>

<style scoped>
</style>
咩有猫腻.
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-table 下拉框点击列搜索
qq_16795789的博客
03-23 110
/计算选择列前面所有的宽度。
el-table组件实现表头搜索
weixin_45723246的博客
12-11 1795
el-table实现在表头搜索数据，并解决点击搜索图标，搜索区域消失的问题
el-table 表单头部插入搜索框(vue2)
最新发布
weixin_50339217的博客
05-16 465
【代码】el-table 表单头部插入搜索框(vue2)
Vue+Element Ui实现el-table自定义表头下拉选择表头筛选
Yongqiang Chen的博客
01-11 4839
el-input size="small" placeholder="请输入关键字" v-model="cloumnKeyword" clearable>// 操作按钮组 === label: 文本，show：是否显示，icon：按钮图标，disabled：是否禁用，method：回调方法, 等等。defaultColumns: ["操作", "日期", "姓名", "地址"],totalColumns: ["操作", "日期", "姓名", "地址"],
el-table表头自定义筛选的实现
qq_36396822的博客
02-15 6089
el-table表头自定义筛选
vue-admin HeaderSearch(表头搜索)组件修改
子明的小博客
09-17 1383
需求 当点击表头的搜索框时,搜索订单管理中的某条订单,跳转至订单列表,并且展示对应的tab 思路 1.设置表头搜索组件 2.路由跳转至订单列表 3.通过vuex管理搜索的值 4.订单列表监听该值,设置搜索条件,调用后台接口.最后展示对应tab 实现 修改搜索组件 1.1 进入src\components\HeaderSearch找到表头搜索组件,可以在原有搜索组件基础上更改,或者新建一个搜索组件,如果为新建,需要在layout对应的表头模块重新引入.为了书写方便,我在这里直接更改 TEMPLATE: &lt
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
10-17
主要介绍了VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
通过这种方式，我们可以创建一个高度可配置且易于复用的远程搜索组件。在实际项目中，可以将这个组件集成到任何需要远程搜索下拉选择的地方，只需要传递相应的数据和配置即可。这样的组件化设计遵循了软件开发的最佳...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
基于Vue el-autocomplete 实现类似百度搜索框功能
10-16
本文通过代码给大家介绍了Vue el-autocomplete 实现类似百度搜索框功能,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue el-table 表头搜索（筛选）功能 实现分析（零）
dangsh_的博客
11-13 7439
重点： 先看一下最终的实现效果 如果是你想要的 就可以看下去~ 分割线 由于公司一部分业务是antd写的，一部分是element写的 antd的table内置了搜索功能，像下面这样 但是element中只内置了如下的筛选功能 虽然可以用下面的自定义表头实现相应功能 但是用起来不是太优雅，而且在字段较多的时候不合适，故决定自己实现一下 我是后端开发，有哪里写的不合适，还望指正，先行谢过~ 首先罗列一下各项步骤 在el-table 头部添加 搜索icon，点击icon出现popover。（可选
Vue Element table表格实现表头自定义多类型动态筛选 , 目前10种筛选类型，复制即用
热门推荐
疑问 搜索 动手 解决 记录
03-25 1万+
一、效果图 目前10种筛选类型 看看是否是你需要的，本文可能有点长 ，我尽可能的给讲清楚，包括源码附上 二、前言 实现图中的表格，特定的两个要求，筛选条件的接口(返回多种类型及字段标识)，列表接口统一为一个，靠mark参数传输与后台商定好的标识，当然，如果你们的后端能够即能返回列表数据又能返回筛选条件的各种类型的标识也是极好的 。 表格中涉及到返回的数据是value（数字、id等类似select option里绑定的value）形式的，可能需要后端处理成label的形式返给前端，如同上图里的地区，
el-table表头加入筛选功能
m0_53251830的博客
04-26 6700
table表格在表头设置下拉过滤条件/功能
el-table封装组件化，混入动态查询条件以及分页功能
qq_41710719的博客
11-19 764
不大喜欢废话，我喜欢直接上代码，代码上有注释，有问题直接，评论，我看到就修改，谢谢各位大佬指教，我开始怼代码了哈哈哈 这是子组件 <template> <div> <!-- 动态查询条件 --> <el-form v-if="tableConfig.searchForm" inline ref="form" :model="tableConfig.searchParams"> <el-form-item v
基于vue的表格自定义表头搜索功能
陈慕一的博客
07-16 2220
工作中遇到了需要点击表格头展示本列数据,数据可搜索功能,所以把代码贴上来. 这里采用的是组件的方法: 父组件: // 父组件 HTML代码 <el-table-column> <template slot="header" slot-scope="scope"> <u-select table-title="表格名字" @btnTableHeader="btnTableHeader($event)"></u-select..
Element-UI：el-table 表头筛选
weixin_44209082的博客
05-17 4502
前言 需求：根据表头筛选表格符合条件的数据 最终实现效果： 情况一：表格没有分页 html 部分： 在列中设置 filters 和 filter-method 属性即可开启该列的筛选。 filters 是一个数组，filter-method 是一个方法，它用于决定某些数据是否显示， 会传入三个参数：value, row 和 column。 <el-table-column prop="UploadStatus" label="上传逻辑" width="100" fixed="l
el-table 表头自定义动态树形筛选框
chen_ai_tao的博客
12-12 2064
el-table 表头自定义动态树形筛选框
el-table表格搜索跳转定位功能
weixin_53558474的博客
11-16 1247
搜索需要查询到的某条数据,然后点击定位滚到查询数据并且高亮功能
el-table和el-form 实现搜索和表格
王子老师
11-15 832
实现方法： <el-form :inline="true" class="demo-form-inline"> <el-form-item label="城市："> <el-select v-model="searchForm.region_id" clearable .
el-table 表头使用el-popover
11-29
为了在el-table表头中使用el-popover，您需要为每个popover绑定一个独特的变量。以下是一个例子，展示了如何在el-table表头中使用el-popover： ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"> <template slot="header"> <div> 日期 <el-popover placement="bottom" width="200" trigger="hover" v-model="popoverVisible1" > <p>这是一个日期选择器</p> <el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker> </el-popover> <el-button slot="reference" icon="el-icon-question" size="mini" @click="popoverVisible1 = true" ></el-button> </div> </template> </el-table-column> <el-table-column prop="name" label="姓名" width="180"> <template slot="header"> <div> 姓名 <el-popover placement="bottom" width="200" trigger="hover" v-model="popoverVisible2" > <p>这是一个输入框</p> <el-input v-model="name" placeholder="请输入姓名"></el-input> </el-popover> <el-button slot="reference" icon="el-icon-question" size="mini" @click="popoverVisible2 = true" ></el-button> </div> </template> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { date: '2022-01-01', name: '张三' }, { date: '2022-01-02', name: '李四' }, { date: '2022-01-03', name: '王五' } ], popoverVisible1: false, popoverVisible2: false, date: '', name: '' }; } }; </script> ``` 在这个例子中，我们为每个el-popover绑定了一个独特的变量(popoverVisible1和popoverVisible2)，这样每个popover就可以正常渲染了。同时，我们还为每个popover添加了一个el-button，当用户将鼠标悬停在这个按钮上时，popover就会显示出来。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值