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 相关文章推荐
javascript的函数
Jan 31 Javascript
奇妙的js
Sep 24 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
js+css在交互上的应用
Jul 18 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
js跨域访问示例(客户端/服务端)
May 19 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
Aug 10 Javascript
JS获取文件大小方法小结
Dec 08 Javascript
AngularJs动态加载模块和依赖注入详解
Jan 11 Javascript
在vue里面设置全局变量或数据的方法
Mar 09 Javascript
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
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
用php获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
使用pthreads实现真正的PHP多线程(需PHP5.3以上版本)
2014/05/05 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
jquery获取iframe中的dom对象(两种方法)
2013/07/02 Javascript
Javascript检查图片大小不要让大图片撑破页面
2014/11/04 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
jQuery中的siblings()是什么意思(推荐)
2016/12/29 Javascript
js实现QQ面板拖拽效果(慕课网DOM事件探秘)(全)
2017/09/19 Javascript
JavaScript定义函数的三种实现方法
2017/09/23 Javascript
JavaScript实现的贝塞尔曲线算法简单示例
2018/01/30 Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
2018/02/24 jQuery
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
对vue下点击事件传参和不传参的区别详解
2018/09/15 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
vue 中固定导航栏的实例代码
2019/11/01 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
js实现Element中input组件的部分功能并封装成组件(实例代码)
2021/03/02 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
玩转python爬虫之URLError异常处理
2016/02/17 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
python实现智能语音天气预报
2019/12/02 Python
CSS图片翻转动画技术详解(IE也实现了)
2014/04/03 HTML / CSS
如何整合JQuery和Prototype
2014/01/31 面试题
初中教师业务学习材料
2014/05/12 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
闪闪的红星观后感
2015/06/08 职场文书
运动会加油稿50字
2015/07/21 职场文书
学习心理学心得体会
2016/01/22 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python