Vue+Element ui 根据后台返回数据设置动态表头操作

由于后端是多人开发，也没有规范数据格式，所有页面是我一个人开发，所以就会遇到同样的页面不同的返回数据格式问题。

一、根据element文档，利用prop属性绑定对应值，label绑定表头。

html

返回的数据类型

data(): {
  return: {
    cols:[
      {prop: "327", label: "护士"}, 
      {prop: "328", label: "护理员组长"},
      {prop: "329", label: "护理员"},
      {prop: "330", label: "输单员"}
   ],
   tableData:[
     {327: "24", 328: "20", 329: "18", 330: "2"},
     {327: "22", 328: "20", 329: "18", 330: "2"},
     {327: "22", 328: "20", 329: "18", 330: "2"},
     {327: "51", 328: "21", 329: "20", 330: "6"},
     {327: "21", 328: "20", 329: "18", 330: "2"},
   ]
  }
}

二、返回的数据都是数组形式，值与表头按照数组下标相对应。

html

返回的数据类型

data(): {
 return: {
 // 表头数据
 table_head:["护士", "护理员组长", "护理员", "输单员"],
 // 表格内容数据
 table_content:[
   ["24", "20", "18", "2"], 
   ["22", "20", "18", "2"],
   ["22", "20", "18", "2"],
   ["51", "21", "20", "6"],
   ["21", "20", "18", "2"],
 ],
 
 }
}

补充知识：element-ui table 表头filter 使用实现重新向后台获取数据

描述：当我们在使用element-ui的时候，常常用到表格，有表格就会有筛选。

这个时候往往会在表格上方使用筛选机的方式来实现筛选

像这样，但是一旦筛选条件增多，这个筛选机就会越来越长。这一点都不酷。

所以这边使用element提供的filters功能。

看了一下往上都说只能对已经有的数据进行筛选，不能后台筛选。

？？？不分页的数据到无所谓，我一个分页的数据，一页10条，难不成前端筛选第一页显示3条，第二页显示5条？？

excuse me？

上代码

以上这篇Vue+Element ui 根据后台返回数据设置动态表头操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。