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 相关文章推荐
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
基于Jquery的简单图片切换效果
Jan 06 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
jquery cookie的用法总结
Nov 18 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
Angular 路由route实例代码
Jul 12 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
vue项目打包后打开页面空白解决办法
Jun 29 Javascript
jQuery实现轮播图及其原理详解
Apr 12 jQuery
es6函数中的作用域实例分析
Apr 18 Javascript
Vue CLI中模式与环境变量的深入详解
May 30 Vue.js
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生成gif动画的方法
2015/11/05 PHP
PHP实现可添加水印与生成缩略图的图片处理工具类
2018/01/16 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
jQuery html()等方法介绍
2009/11/18 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
js格式化时间和js格式化时间戳示例
2014/02/10 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
PHP PDO操作总结
2014/11/17 Javascript
纯Javascript实现ping功能的方法
2015/03/20 Javascript
浅析JS获取url中的参数实例代码
2016/06/14 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
jQuery实现的点击按钮改变样式功能示例
2018/07/21 jQuery
详解基于React.js和Node.js的SSR实现方案
2019/03/21 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
Python编程之event对象的用法实例分析
2017/03/23 Python
django框架如何集成celery进行开发
2017/05/24 Python
Python下调用Linux的Shell命令的方法
2018/06/12 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
HTML5上传文件显示进度的实现代码
2012/08/30 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
三星印度官网:Samsung印度
2019/08/03 全球购物
中海讯通笔试题
2015/09/15 面试题
管理站站长岗位职责
2013/11/27 职场文书
市场安全管理制度
2014/01/26 职场文书
暑假学习心得体会
2014/09/02 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang