当前位置：文江博客话题详情

vue+element-ui 表格+分页只能过滤当前页面，可否过滤全部数据？

发布于 2022-09-05 06:31:25 字数 506 浏览 17 评论 0

使用element的表格和分页，然后是前端获取全部数据后进行分页，但是只能过滤当前页面数据，可是我想过滤全部的数据，怎么办呢？
文档里的demo都是没有分页的

...]
而且回调函数也只有两个参数，不能重新制定过滤的data

所以我想能不能自己定制一个，可是table组件里的表头里面好像是不能随意加东西的，都是通过属性配置的

不知道大神们有没有什么好的建议和方法？感激不尽~

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

只想待在家 2022-09-12 06:31:25

好吧我又自问自答了。。经过这两天的调研，得出了一个方案，并且已经实现了多列多条件筛选，希望有人遇到相同问题可以参考一下。
其实element table有一个事件filter-change，带一个参数filters:

当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。

那么好了，有了这个表头筛选条件的自定义事件，就可以自己定制过滤事件了。

可以和column-key配套使用，当有多列筛选的时候，能够从filters中知道当前是哪一列

column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件

回复收藏 0

夏末 2022-09-12 06:31:25

filter-method 方法返还筛选条件value 和每列数据row 根据返还的value 手动筛选表格数据不就好了

回复收藏 0

梦亿 2022-09-12 06:31:25

对与自定义表头

<el-table-column :render-header="headerBoolean">

headerBoolean: function (h, obj) {
      return <div><input type="checkbox" v-model="c"></input>布尔</div>;
    },

需要提的是需要让你的webpack支持jsx
我的做法是（当然也是瞎整好使的，可能不是正规做法）
package中引入

 "devDependencies": {
    "autoprefixer": "^6.7.2",
    "babel-cli": "^6.14.0",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-add-module-exports": "^0.2.1",
    "babel-plugin-module-resolver": "^2.2.0",
    "babel-plugin-syntax-jsx": "^6.8.0",
    "babel-plugin-transform-vue-jsx": "^3.3.0",
    "babel-preset-es2015": "^6.14.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",

然后在.babelrc中

{
  "presets": [["es2015", { "loose": true }]],
  "plugins": ["transform-vue-jsx"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

不过你在表头中尽量不要用饿了么自己的控件，会有莫名bug。希望能帮到你

回复收藏 0