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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
js jquery做的图片连续滚动代码
Jan 06 Javascript
JavaScript 基础篇之运算符、语句(二)
Apr 07 Javascript
jquery怎样实现ajax联动框(一)
Mar 08 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
js调用父框架函数与弹窗调用父页面函数的简单方法
Nov 01 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
webpack之devtool详解
Feb 10 Javascript
node.js调用C++函数的方法示例
Sep 21 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
vue 实现一个简单的全局调用弹窗案例
Sep 10 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
php设计模式 Factory(工厂模式)
2011/06/26 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
全面解析PHP面向对象的三大特征
2017/06/10 PHP
Thinkphp5.0框架使用模型Model的获取器、修改器、软删除数据操作示例
2019/10/11 PHP
用Greasemonkey 脚本收藏网站会员信息到本地
2009/10/26 Javascript
jquery click([data],fn)使用方法实例介绍
2013/07/08 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
2015/04/02 Javascript
JQUERY简单按钮轮换选中效果实现方法
2015/05/07 Javascript
jQuery 获取跨域XML(RSS)数据的相关总结分析
2016/05/18 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
JS for...in 遍历语句用法实例分析
2016/08/24 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
js阻止冒泡和默认事件(默认行为)详解
2016/10/20 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
解决Jquery下拉框数据动态获取的问题
2018/01/25 jQuery
实例讲解vue源码架构
2019/01/24 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
vue+Element实现搜索关键字高亮功能
2019/05/28 Javascript
Vue中axios的封装(报错、鉴权、跳转、拦截、提示)
2019/08/20 Javascript
VSCode搭建React Native环境
2020/05/07 Javascript
理解Python中的类与实例
2015/04/27 Python
python获取一组数据里最大值max函数用法实例
2015/05/26 Python
基于asyncio 异步协程框架实现收集B站直播弹幕
2016/09/11 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
Pytorch 使用 nii数据做输入数据的操作
2020/05/26 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
荷兰家电销售网站:Welhof
2020/12/08 全球购物
非功能性需求都包括哪些方面
2013/10/29 面试题
应用心理学个人的求职信
2013/12/08 职场文书
药品促销活动方案
2014/02/14 职场文书
《晚上的太阳》教学反思
2014/04/23 职场文书
车辆工程专业求职信
2014/06/14 职场文书
go select编译期的优化处理逻辑使用场景分析
2021/06/28 Golang
golang内置函数len的小技巧
2021/07/25 Golang