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


Posted in Javascript onSeptember 21, 2020

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

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

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

html

<el-table class="tb-edit" highlight-current-row :data="tableData" border style="width: 100%">         
 <template v-for="(col,index) in cols">          
 <el-table-column :prop="col.prop" :label="col.label"></el-table-column>        
 </template>       
</el-table>

返回的数据类型

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

<el-table :data="table_content" border>        
 <el-table-column :label="val" v-for="(val, i) in table_head" :key="i">           
 <template slot-scope="scope">{{table_content[scope.$index][i]}}</template>        
 </el-table-column>       
</el-table>

返回的数据类型

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的时候,常常用到表格,有表格就会有筛选。

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

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

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

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

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

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

excuse me?

上代码

<template>
 <el-table
  ref="filterTable"
  :data="tableData"
  @filter-change="fnFilterChangeInit"
  style="width: 100%">
  <el-table-column
   prop="name"
   label="姓名"
   width="180">
  </el-table-column>
  <el-table-column
   prop="address"
   label="地址"
   :formatter="formatter">
  </el-table-column>
  <el-table-column
   prop="tag"
   label="标签"
   width="100"
   :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
   :filter-method="filterTag"
   column-key="tag"
   filter-placement="bottom-end">
   <template slot-scope="scope">
    <el-tag
     :type="scope.row.tag === '家' ? 'primary' : 'success'"
     disable-transitions>{{scope.row.tag}}</el-tag>
   </template>
  </el-table-column>
 </el-table>
</template>
 
<script>
 export default {
  data() {
   return {
    tableData: [],
    options:{
      tag: undefined
    }
   }
  },
  methods: {
   // 这里使用一个init的方法来模拟异步获取数据懂这个意思就好
   // 假装接受options作为筛选条件
   init(options){
    this.tableData = [{
     date: '2016-05-02',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1518 弄',
     tag: '家'
    }, {
     date: '2016-05-04',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1517 弄',
     tag: '公司'
    }, {
     date: '2016-05-01',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1519 弄',
     tag: '家'
    }, {
     date: '2016-05-03',
     name: '王小虎',
     address: '上海市普陀区金沙江路 1516 弄',
     tag: '公司'
    }]
   },
   // table column 的方法,改写这个方法
   filterTag(value, row, column) {
    return true
   },
   // table 的方法
   // filter 的格式 obj { column-key: Array }
   // Array[0] 筛选的值 
   fnFilterChangeInit(filter){
     // do something
     // example 这里最好用if,没有if可以试试也许有奇迹
     if(filter.tag){
      // 为什么这么处理 怕有些同学把undefined当一个字符串传给后台
      this.options.tag = filter.tag[0] == undefined ? '':filter.tag[0]
     }
     this.init(this.options)
   }
  }
 }
</script>

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

Javascript 相关文章推荐
在网页中屏蔽快捷键
Sep 06 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
Bootstrap3使用typeahead插件实现自动补全功能
Jul 07 Javascript
Require.js的基本用法详解
Jul 03 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
Postman的下载及安装教程详解
Oct 16 Javascript
React中获取数据的3种方法及优缺点
Feb 18 Javascript
微信小程序学习总结(五)常见问题实例小结
Jun 04 Javascript
JS实现小米轮播图
Sep 21 #Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
Sep 21 #Javascript
vue组件入门知识全梳理
Sep 21 #Javascript
Ajax获取node服务器数据的完整步骤
Sep 20 #Javascript
微信小程序获取当前时间及星期几的实例代码
Sep 20 #Javascript
vue操作dom元素的3种方法示例
Sep 20 #Javascript
npm ci命令的基本使用方法
Sep 20 #Javascript
You might like
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
使用PHP维护文件系统
2006/10/09 PHP
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php使用iconv中文截断问题的解决方法
2015/02/11 PHP
PHP模板引擎Smarty内建函数foreach,foreachelse用法分析
2016/04/11 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
IE关闭时判断及AJAX注销案例学习
2013/02/18 Javascript
jquery实现树形二级菜单实例代码
2013/11/20 Javascript
JavaScript获取表单enctype属性的方法
2015/04/02 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
Node.js实现JS文件合并小工具
2016/02/02 Javascript
深入浅析JS Function()构造函数
2016/08/22 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
高性能的javascript之加载顺序与执行原理篇
2018/01/14 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
vue-router二级导航切换路由及高亮显示的实现方法
2019/07/10 Javascript
node crawler如何添加promise支持
2020/02/01 Javascript
Python发送email的3种方法
2015/04/28 Python
如何高效使用Python字典的方法详解
2017/08/31 Python
Python中GIL的使用详解
2018/10/03 Python
python批量修改ssh密码的实现
2019/08/08 Python
python 实现矩阵按对角线打印
2019/11/29 Python
使用Python实现分别输出每个数组
2019/12/06 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
应届生护士求职信
2013/11/01 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
java objectUtils 使用可能会出现的问题
2022/02/28 Java/Android
在ubuntu下安装go开发环境的全过程
2022/08/05 Golang