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

使用element的表格和分页，然后是前端获取全部数据后进行分页，但是只能过滤当前页面数据，可是我想过滤全部的数据，怎么办呢？
文档里的demo都是没有分页的
【Vue】vue+element-ui 表格+分页 只能过滤当前页面，可否过滤全部数据？
...]
而且回调函数也只有两个参数，不能重新制定过滤的data

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

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

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

回答

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

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

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

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

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

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

对与自定义表头

<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。希望能帮到你

你好,看了"vue+element-ui 表格+分页 只能过滤当前页面，可否过滤全部数据？"
我现在也遇到这个问题了,没看懂,能不能给个demo

想请问一下 有多个筛选的话 改如何处理啊？

你好，我也遇到了同样的困惑，请问你的解决方案有代码示例么，我看的不是很明白。谢谢

没看懂啊没看懂啊

以上是 【Vue】vue+element-ui 表格+分页 只能过滤当前页面，可否过滤全部数据？ 的全部内容， 来源链接： utcz.com/a/73169.html

回到顶部