发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

el-table组件实现表头搜索功能

有丶恋旧

8

主题

8

帖子

24

积分

新手上路

Rank: 1

积分
24
显示全部楼层
一，展示效果




二，功能介绍

利用
  1. el-table
复制代码
组件提供的
  1. render-header
复制代码
属性自定义表头渲染内容，包含表头标题和一个搜索图标，图标是一个
  1. Popover
复制代码
组件弹出框，点击图标出现下面输入框和搜索按钮，点击搜索区域以外的位置，搜索区域消失，这个使用的是
  1. element-ui
复制代码
的
  1. Clickoutside
复制代码
指令。


三，实现代码

主页面
  1. template
复制代码
部分：
  1. <!-- template部分-->
  2.         <el-table  
  3.                   :data="list"
  4.           v-loading="listLoading"
  5.           ref="table">
  6.        <el-table-column
  7.             v-for="(item, index) in tableHead[activeOption]"
  8.             :key="index + item.prop + item.label"
  9.             :prop="item.prop"
  10.             :label="item.label"
  11.             :min-width="item.width ? item.width : item.label.length * 12 + 50"
  12.             :show-overflow-tooltip="true"
  13.             :align="item.align || 'center'"
  14.             class-name="flexColumn"
  15.             :render-header="(h, row) => NumberRenderHeader(h, row, item)"
  16.             :fixed="item.fixed"
  17.           >
  18.             <template slot-scope="{ row }">
  19.               <span>
  20.                 {{ row[item.prop] || "" }}
  21.               </span>
  22.             </template>
  23.           </el-table-column>
复制代码
主页面
  1. methods
复制代码
部分，其中
  1. SearchCom
复制代码
是自定义搜索组件。
  1.     // 表头渲染函数
  2.     NumberRenderHeader(createElement, { column, $index }, item) {
  3.       let self = this;
  4.       if (!item.isHeadSearch) {
  5.         return item.label;
  6.       }
  7.       return createElement("div", [
  8.         createElement("div", {
  9.           domProps: {
  10.             innerHTML: column.label,
  11.           },
  12.         }),
  13.         createElement(SearchCom, {
  14.           props: {
  15.             defaultValue: "", // 默认值
  16.             selectIndex: item.popIndex || $index - 3,
  17.           },
  18.           on: {
  19.             selectChange: (val) => self.selectFruitChange(val, item),
  20.           },
  21.         }),
  22.       ]);
  23.     },
复制代码
  1. render-header
复制代码
属性：
  1. 关于[code]createElement
复制代码
函数：介绍链接[/code]自定义组件部分
  1. <template>
  2.   <el-popover
  3.     placement="bottom"
  4.     width="200"
  5.     trigger="manual"
  6.     v-model="visible"
  7.     @show="showPopover"
  8.     popper-class="charge-item-header-popover aaa"
  9.   >
  10.     <!-- 弹出框内容 -->
  11.     <div class="popover_box">
  12.       <el-input
  13.         placeholder="请输入"
  14.         v-model="selectValue"
  15.         @keyup.enter.native="confirm"
  16.         ref="sInput"
  17.         style="padding: 10px 5px"
  18.       >
  19.       </el-input>
  20.       <el-button @click="confirm">搜索</el-button>
  21.     </div>
  22.     <!-- 触发元素 -->
  23.     <div
  24.       slot="reference"
  25.       style="margin-left: 5px"
  26.       @click.stop="popClick"
  27.       v-clickoutside="closeOver"
  28.     >
  29.       <i class="el-icon-search"></i>
  30.     </div>
  31.   </el-popover>
  32. </template>
  33. <script>
  34. // import Clickoutside from "element-ui/src/utils/clickoutside"; // 使用elementui的 Clickoutside 指令
  35. import Clickoutside from "./clickoutside"; // 使用elementui的 Clickoutside 指令
  36. export default {
  37.   data() {
  38.     return {
  39.       value: "", // 输入框中的值
  40.       visible: false, // 组件显示隐藏控制
  41.       selectValue: "", // 当前选中值
  42.       popperElm: "",
  43.     };
  44.   },
  45.   props: {
  46.     defaultValue: {
  47.       type: String,
  48.       default: "",
  49.     },
  50.     selectIndex: {
  51.       type: Number,
  52.       default: 0,
  53.     },
  54.   },
  55.   mounted() {
  56.     // 解决点击输入框组件关闭问题
  57.     this.popperElm = document.getElementsByClassName(
  58.       "charge-item-header-popover"
  59.     )[this.selectIndex - 1];
  60.   },
  61.   methods: {
  62.     // 点击当前组件之外关闭
  63.     handleOutsideClick(e) {
  64.       setTimeout(() => {
  65.         this.visible = false;
  66.       }, 16);
  67.     },
  68.     // 展示当前组件时 鼠标光标定位到输入框
  69.     showPopover() {
  70.       this.$nextTick(() => {
  71.         this.$refs.sInput.focus();
  72.       });
  73.     },
  74.     // 关闭当前组件
  75.     closeOver() {
  76.       this.visible = false;
  77.     },
  78.     popClick(e) {
  79.       this.visible = !this.visible;
  80.     },
  81.     // 输入文字匹配对象的li项
  82.     confirm() {
  83.       this.$emit("selectChange", this.selectValue);
  84.     },
  85.   },
  86.   directives: {
  87.     Clickoutside, // 引用elementui Clickoutside指令
  88.   },
  89. };
  90. </script>
  91. <style scoped>
  92. .el-input {
  93.   border-bottom: 1px solid #ccc;
  94. }
  95. .el-input--prefix /deep/ .el-input__prefix {
  96.   left: 15px;
  97. }
  98. .popover_box {
  99.   display: flex;
  100.   align-items: center;
  101.   padding: 0 5px;
  102. }
  103. ::v-deep .el-input {
  104.   border-bottom: none;
  105. }
  106. </style>
  107. <style>
  108. .charge-item-header-popover {
  109.   padding: 0;
  110. }
  111. .charge-item-header-popover .el-button {
  112.   height: 80%;
  113. }
  114. </style>
复制代码

四，遇到的问题

点击表格的某个搜索图标，点击输入框，搜索区域消失，控制是否点击目标区域以外的元素是通过
  1. Clickoutside
复制代码
指令实现的，下面是
  1. Clickoutside
复制代码
指令的关键代码：
  1. function createDocumentHandler(el, binding, vnode) {
  2.   return function (mouseup = {}, mousedown = {}) {
  3.     if (
  4.       !vnode ||
  5.       !vnode.context ||
  6.       !mouseup.target ||
  7.       !mousedown.target ||
  8.       el.contains(mouseup.target) ||
  9.       el.contains(mousedown.target) ||
  10.       el === mouseup.target ||
  11.       (vnode.context.popperElm &&
  12.         (vnode.context.popperElm.contains(mouseup.target) ||
  13.           vnode.context.popperElm.contains(mousedown.target)))
  14.     )
  15.       return;
  16.     if (
  17.       binding.expression &&
  18.       el[ctx].methodName &&
  19.       vnode.context[el[ctx].methodName]
  20.     ) {
  21.       vnode.context[el[ctx].methodName]();
  22.     } else {
  23.       el[ctx].bindingFn && el[ctx].bindingFn();
  24.     }
  25.   };
  26. }
复制代码
其中
  1. vnode
复制代码
代表使用自定义指令的元素，
  1. vnode.context.popperElm
复制代码
则代表使用自定义指令所在的
  1. vue
复制代码
文件中
  1. data
复制代码
属性中的数据，若这个值绑定的元素包含鼠标点击的元素（即搜索图标）则
  1. Popver
复制代码
弹出框不会消失，否则消失，其中
  1. popperElm
复制代码
绑定的元素如下：
  1.   mounted() {
  2.     // 解决点击输入框组件关闭问题
  3.     this.popperElm = document.getElementsByClassName(
  4.       "charge-item-header-popover"
  5.     )[0];
  6.   },
复制代码
以上说明通过上面方法获取的弹出框元素并不包含搜索图标（两个元素不具有父子关系），但是从控制台检索元素看，两个元素又确实是包含关系，后来想到原因如下
  1. 一个表格内包含多个表头搜索字段，而第二个搜索框肯定是不包含第一个搜索框图标的
复制代码

五，解决

在获取弹出框元素时传给搜索框组件一个索引说明是当前页面中的第几个弹出框
父组件页面
  1.      createElement(SearchCom, {
  2.          props: {
  3.            defaultValue: "", // 默认值
  4.            selectIndex: item.popIndex || 1, //selectIndex代表当前页面的第几个popper弹出框
  5.          },
  6.          on: {
  7.            selectChange: (val) => self.selectFruitChange(val, item),
  8.          },
  9.        }),
复制代码
自定义弹出框组件
  1. mounted() {
  2.     // 解决点击输入框组件关闭问题
  3.     this.popperElm = document.getElementsByClassName(
  4.       "charge-item-header-popover"
  5.     )[this.selectIndex - 1];
  6.   },
复制代码
到此这篇关于el-table组件实现表头搜索的文章就介绍到这了,更多相关el-table表头搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
一，展示效果


二，功能介绍

利用
  1. el-table
复制代码
组件提供的
  1. render-header
复制代码
属性自定义表头渲染内容，包含表头标题和一个搜索图标，图标是一个
  1. Popover
复制代码
组件弹出框，点击图标出现下面输入框和搜索按钮，点击搜索区域以外的位置，搜索区域消失，这个使用的是
  1. element-ui
复制代码
的
  1. Clickoutside
复制代码
指令。
三，实现代码

主页面
  1. template
复制代码
部分：
  1. <!-- template部分-->
  2.         <el-table  
  3.                   :data="list"
  4.           v-loading="listLoading"
  5.           ref="table">
  6.        <el-table-column
  7.             v-for="(item, index) in tableHead[activeOption]"
  8.             :key="index + item.prop + item.label"
  9.             :prop="item.prop"
  10.             :label="item.label"
  11.             :min-width="item.width ? item.width : item.label.length * 12 + 50"
  12.             :show-overflow-tooltip="true"
  13.             :align="item.align || 'center'"
  14.             class-name="flexColumn"
  15.             :render-header="(h, row) => NumberRenderHeader(h, row, item)"
  16.             :fixed="item.fixed"
  17.           >
  18.             <template slot-scope="{ row }">
  19.               <span>
  20.                 {{ row[item.prop] || "" }}
  21.               </span>
  22.             </template>
  23.           </el-table-column>
复制代码
主页面
  1. methods
复制代码
部分，其中
  1. SearchCom
复制代码
是自定义搜索组件。
  1.     // 表头渲染函数
  2.     NumberRenderHeader(createElement, { column, $index }, item) {
  3.       let self = this;
  4.       if (!item.isHeadSearch) {
  5.         return item.label;
  6.       }
  7.       return createElement("div", [
  8.         createElement("div", {
  9.           domProps: {
  10.             innerHTML: column.label,
  11.           },
  12.         }),
  13.         createElement(SearchCom, {
  14.           props: {
  15.             defaultValue: "", // 默认值
  16.             selectIndex: item.popIndex || $index - 3,
  17.           },
  18.           on: {
  19.             selectChange: (val) => self.selectFruitChange(val, item),
  20.           },
  21.         }),
  22.       ]);
  23.     },
复制代码
  1. render-header
复制代码
属性：
  1. 关于[code]createElement
复制代码
函数：介绍链接[/code]自定义组件部分
  1. <template>
  2.   <el-popover
  3.     placement="bottom"
  4.     width="200"
  5.     trigger="manual"
  6.     v-model="visible"
  7.     @show="showPopover"
  8.     popper-class="charge-item-header-popover aaa"
  9.   >
  10.     <!-- 弹出框内容 -->
  11.     <div class="popover_box">
  12.       <el-input
  13.         placeholder="请输入"
  14.         v-model="selectValue"
  15.         @keyup.enter.native="confirm"
  16.         ref="sInput"
  17.         style="padding: 10px 5px"
  18.       >
  19.       </el-input>
  20.       <el-button @click="confirm">搜索</el-button>
  21.     </div>
  22.     <!-- 触发元素 -->
  23.     <div
  24.       slot="reference"
  25.       style="margin-left: 5px"
  26.       @click.stop="popClick"
  27.       v-clickoutside="closeOver"
  28.     >
  29.       <i class="el-icon-search"></i>
  30.     </div>
  31.   </el-popover>
  32. </template>
  33. <script>
  34. // import Clickoutside from "element-ui/src/utils/clickoutside"; // 使用elementui的 Clickoutside 指令
  35. import Clickoutside from "./clickoutside"; // 使用elementui的 Clickoutside 指令
  36. export default {
  37.   data() {
  38.     return {
  39.       value: "", // 输入框中的值
  40.       visible: false, // 组件显示隐藏控制
  41.       selectValue: "", // 当前选中值
  42.       popperElm: "",
  43.     };
  44.   },
  45.   props: {
  46.     defaultValue: {
  47.       type: String,
  48.       default: "",
  49.     },
  50.     selectIndex: {
  51.       type: Number,
  52.       default: 0,
  53.     },
  54.   },
  55.   mounted() {
  56.     // 解决点击输入框组件关闭问题
  57.     this.popperElm = document.getElementsByClassName(
  58.       "charge-item-header-popover"
  59.     )[this.selectIndex - 1];
  60.   },
  61.   methods: {
  62.     // 点击当前组件之外关闭
  63.     handleOutsideClick(e) {
  64.       setTimeout(() => {
  65.         this.visible = false;
  66.       }, 16);
  67.     },
  68.     // 展示当前组件时 鼠标光标定位到输入框
  69.     showPopover() {
  70.       this.$nextTick(() => {
  71.         this.$refs.sInput.focus();
  72.       });
  73.     },
  74.     // 关闭当前组件
  75.     closeOver() {
  76.       this.visible = false;
  77.     },
  78.     popClick(e) {
  79.       this.visible = !this.visible;
  80.     },
  81.     // 输入文字匹配对象的li项
  82.     confirm() {
  83.       this.$emit("selectChange", this.selectValue);
  84.     },
  85.   },
  86.   directives: {
  87.     Clickoutside, // 引用elementui Clickoutside指令
  88.   },
  89. };
  90. </script>
  91. <style scoped>
  92. .el-input {
  93.   border-bottom: 1px solid #ccc;
  94. }
  95. .el-input--prefix /deep/ .el-input__prefix {
  96.   left: 15px;
  97. }
  98. .popover_box {
  99.   display: flex;
  100.   align-items: center;
  101.   padding: 0 5px;
  102. }
  103. ::v-deep .el-input {
  104.   border-bottom: none;
  105. }
  106. </style>
  107. <style>
  108. .charge-item-header-popover {
  109.   padding: 0;
  110. }
  111. .charge-item-header-popover .el-button {
  112.   height: 80%;
  113. }
  114. </style>
复制代码
四，遇到的问题

点击表格的某个搜索图标，点击输入框，搜索区域消失，控制是否点击目标区域以外的元素是通过
  1. Clickoutside
复制代码
指令实现的，下面是
  1. Clickoutside
复制代码
指令的关键代码：
  1. function createDocumentHandler(el, binding, vnode) {
  2.   return function (mouseup = {}, mousedown = {}) {
  3.     if (
  4.       !vnode ||
  5.       !vnode.context ||
  6.       !mouseup.target ||
  7.       !mousedown.target ||
  8.       el.contains(mouseup.target) ||
  9.       el.contains(mousedown.target) ||
  10.       el === mouseup.target ||
  11.       (vnode.context.popperElm &&
  12.         (vnode.context.popperElm.contains(mouseup.target) ||
  13.           vnode.context.popperElm.contains(mousedown.target)))
  14.     )
  15.       return;
  16.     if (
  17.       binding.expression &&
  18.       el[ctx].methodName &&
  19.       vnode.context[el[ctx].methodName]
  20.     ) {
  21.       vnode.context[el[ctx].methodName]();
  22.     } else {
  23.       el[ctx].bindingFn && el[ctx].bindingFn();
  24.     }
  25.   };
  26. }
复制代码
其中
  1. vnode
复制代码
代表使用自定义指令的元素，
  1. vnode.context.popperElm
复制代码
则代表使用自定义指令所在的
  1. vue
复制代码
文件中
  1. data
复制代码
属性中的数据，若这个值绑定的元素包含鼠标点击的元素（即搜索图标）则
  1. Popver
复制代码
弹出框不会消失，否则消失，其中
  1. popperElm
复制代码
绑定的元素如下：
  1.   mounted() {
  2.     // 解决点击输入框组件关闭问题
  3.     this.popperElm = document.getElementsByClassName(
  4.       "charge-item-header-popover"
  5.     )[0];
  6.   },
复制代码
以上说明通过上面方法获取的弹出框元素并不包含搜索图标（两个元素不具有父子关系），但是从控制台检索元素看，两个元素又确实是包含关系，后来想到原因如下
  1. 一个表格内包含多个表头搜索字段，而第二个搜索框肯定是不包含第一个搜索框图标的
复制代码
五，解决

在获取弹出框元素时传给搜索框组件一个索引说明是当前页面中的第几个弹出框
父组件页面
  1.      createElement(SearchCom, {
  2.          props: {
  3.            defaultValue: "", // 默认值
  4.            selectIndex: item.popIndex || 1, //selectIndex代表当前页面的第几个popper弹出框
  5.          },
  6.          on: {
  7.            selectChange: (val) => self.selectFruitChange(val, item),
  8.          },
  9.        }),
复制代码
自定义弹出框组件
  1. mounted() {
  2.     // 解决点击输入框组件关闭问题
  3.     this.popperElm = document.getElementsByClassName(
  4.       "charge-item-header-popover"
  5.     )[this.selectIndex - 1];
  6.   },
复制代码
到此这篇关于el-table组件实现表头搜索的文章就介绍到这了,更多相关el-table表头搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/331255bwq.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: Webstorm开发uni-app项目详细图文教程

下一篇: 解决vue-pdf的签章不显示问题记录

发表于 2024-11-26 01:01:08

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4