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

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

clipboard.png

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

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

阅读 15.3k
7 个回答

好吧我又自问自答了。。经过这两天的调研,得出了一个方案,并且已经实现了多列多条件筛选,希望有人遇到相同问题可以参考一下。
其实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

新手上路,请多包涵

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏