平台项目 ~ element-vue-table

平台项目~element-table与vue
一简介:前端两大基本功能之一,table的展示
二 目的
   后端传递数据到前端,这里有两种用法
   1 表单仅仅是展示作用,不对每列做任何操作修饰
   2 表单的一些列作格外处理 
   我们将分别说明
三 第一种场景
  表单仅仅展示,不对每列做任何操作修饰
  核心思想 动态生成列
  <el-table v-if=xianshi2 ref="multipleTable" :data="(data || []).slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" >
  <el-table-column v-for="(item,index) in data2" :key="index" :label="item.ziduan" :width="item.width">
  <template slot-scope="scope">
  <span>{{scope.row[item.key]}}</span>
  </template>
  </el-table-column>
  </el-table>
 说明
 1 :data代表展示的表单数据 :data2 代表展示的动态列,通过循环读取
 2 scope用法代表插槽,属于vue用法
特点
1 节省大量的代码,仅仅需要几行就能展示大量列
2 不能针对某个列做修饰操作
3 不能只展示某些列,需要后端进行限制列的返回

四 第二种场景
  表单的特定列需要进行修饰,这样需要手写所有展示列
 <el-table v-if=xianshi1 ref="multipleTable" :data="(list2 || []).slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" >
 <el-table-column prop="ID" label="ID"></el-table-column>
 <template slot-scope="scope">
 <span :class="{yangshi:chuli(scope.row.STATE)}" >{{scope.row.STATE}}</span>
 </template>
 </el-table-column>
 <el-table-column prop="INFO" label="INFO" :show-overflow-tooltip=true></el-table-column>
 </el-table>
  说明
   1 针对不同列做不同的处理,prop和ID都写为列名即可
  特点
  1 如果列多,需要写N多列展示代码
  2 可以针对不同列做扩展判断
   3 在前端进行限制展出
五 总结
  1 根据不同场景选择你需要的东西
六 TABLE补充
  1 :show-overflow-tooltip=true 代表列内容过长会只显示前段
  2 <el-pagination v-if=xianshi1 class="fy" layout="prev, pager, next" @current-change="current_change" :total="total_1" background></el-pagination> 配合上述功能使用,实现自动分页

原文地址:https://www.cnblogs.com/danhuangpai/p/11250069.html

时间: 2024-09-30 00:38:29

平台项目 ~ element-vue-table的相关文章

ivew | element ui- 关于table组件自定义sortMethod排序不生效或错误问题处理

最近项目需求需要,需要对表格列进行自定义排序,用的是iview的组件,看了文档,table 排序这部分,但是没有给出相关例子.以为不难搞的,是不难搞,就是折腾了好一会... Iview table 排序 data () { return { columns5: [ { title: 'Date', key: 'date', sortable: true, }, { title: 'Name', key: 'name' }, { title: 'Age', key: 'age', sortable

电商平台项目

某电商平台项目开发要点记录 本文是博主在开发某电商平台项目的一些杂项记录,方便自己和团队同事查阅,偏向于具体技术或应用的细节和个人理解,但也未必非常具体.文中未提的更多内容可能会另起篇章. 导航属性--EF实体关系fluent配置 AutoMapper Autofac Repository模式 Model & DTO 开源&商用.NET电商平台--NopCommerce(3.9版) & Himall(2.4版) 服务器搭建-VMware vSphere Hypervisor(esx

vue table中使用多选的问题(翻页后如何保存已选项),联动echarts图表实现流量监控

流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需要在table中增开一项,type定义为selection即可: 如何默认列表全选呢? 先关联table: 数据加载完成以后,获取列表数据长度,手动循环切换状态(toggleRowSelection是关键,通过这个方法来触发echarts的刷新): OK,现在可以实现默认全选状态了: 如何与echa

基于Hadoop离线大数据分析平台项目实战

基于Hadoop离线大数据分析平台项目实战  课程学习入口:http://www.xuetuwuyou.com/course/184 课程出自学途无忧网:http://www.xuetuwuyou.com 课程简介: 某购物电商网站数据分析平台,分为收集数据.数据分析和数据展示三大层面.其中数据分析主要依据大数据Hadoop生态系统常用组件进行处理,此项目真实的展现了大数据在企业中实际应用. 课程内容 (1)文件收集框架 Flume ①Flume 设计架构.原理(三大组件) ②Flume 初步使

AppCan中标首都机场移动平台项目

近日,正益无线AppCan依托东方航空.吉祥航空.国家电网.中化集团等大客 户项目的丰富成功经验,凭借企业移动信息化建设的良好口碑.强大的移动化实施部署经验和快速响应的技术团队,在与多家国内外移动厂商比拼中,脱颖而出,成 功中标首都机场移动平台项目,全力护航首都机场各项业务移动化进程. 北京首都国际机场是"中国第一国门",是中国最重要.规模最大.设备最先进.运输生产最繁忙的大型国际航空港,是中国的空中门户和对外交流的重要窗口.北京首都国际机场的年旅客吞吐量从1978年的103万人次增长

网络远程教育实施方案交流之(二)——网络教育平台项目的建设

网络教育平台项目的建设的方案能够自建也能够採购.但项目是否成功,并终于能够落地发展,还须要业主方认真的调研和分析,最有效的方法就是利用项目管理的方法,从前期的需求分析.调研.可行性分析,立项,建设期成本.质量.进度三大管理,后期測试bugfree,维护.客服服务等. 管理内容看起来复杂,事实上理顺了非常easy,大道至简.下面先从功能模块入手,然后再介绍实践和经验,其目的是让没有经验的读者少走弯路,具有相关经验的管理者分享交流,共同推动此项事业的发展. 曾有人问我项目是不是资金投入越多越好?事实

Linux平台项目中时间相关内容

由Linux内核提供的基本时间服务是计算自国际标准时间公元1970年1月1日00:00:00以来经过的秒数,以time_t类型表示,被称为"日历时间",time_t通常定义为一个int型或long型的量. 日历时间有几个典型的特性: 以国际标准时间而非本地时间计时. 可自动进行转换,例如变换到夏时制. 用一个time_t量保存时间和日期. 程序中获取日历时间使用time()函数,函数原型是: #include <time.h> time_t time(time_t *cal

迈瑞综合应用及流程管理平台项目

主题:迈瑞综合应用及流程管理平台项目技术框架交流 嘉宾:迈瑞集团 周舟 有些人一见钟情,有些人日久生情,迈瑞和K2就属于后者. 迈瑞的K2项目始于2010年,一开始和K2的情感磨合并不顺利,像所有父母之命媒妁之言的婚姻一样,一开始相敬如宾,直到一天天相处下来,摸透了彼此的脾气习性,才开始"天雷勾动地火",2012年掌握要领后,迈瑞开始出现爆发式的应用,仅当年就上线153个业务流程. 应用架构总览 技术架构-工作流引擎(WMP-2) 流程平台展示 技术架构-工作流引擎(WMP-1) (本

天然工坊平台项目模式系统开发

随着微信产品的日趋成熟,各行各业的企业都蠢蠢欲动,想吃下微信这款蛋糕,湖南天然工坊就开启了一条新型的互联网之路,该公司研发的竹妃纸巾,通过微信公众号平台以及搭载的自有web电商平台,通过口碑引爆传播,天然工坊从竹妃纸巾切入新兴消费品市场,在产品主张.销售模式都突破了以往既定的路径.天然工坊平台项目模式系统开发找何经理.天然工坊系统项目开发.天然工坊模式平台项目开发等--(188.264.66502 微/电) 最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但