vxe-table vue table 表格组件功能


Posted in Javascript onMay 26, 2019

一个功能更加强大的 Vue 表格组件

查看vxe-table

功能点

•基础
•尺寸
•斑马线条纹
•带边框
•单元格样式
•列宽拖动
•流体高度
•固定表头
•固定列
•固定表头和列
•表头分组
•序号
•单选
•多选
•排序
•筛选
•合并行或列
•表尾合计
•导出 CSV
•显示/隐藏列
•加载中
•格式化内容
•自定义模板
•快捷菜单
•滚动渲染
•展开行
•树形表格
•可编辑表格
•数据校验
•全键盘操作
•Excel 表格

例子

<template>
 <div>
 <vxe-table ref="xTable" :data.sync="tableData">
  <vxe-table-column type="index" width="60"></vxe-table-column>
  <vxe-table-column prop="name" label="Name"></vxe-table-column>
  <vxe-table-column prop="date" label="Date"></vxe-table-column>
  <vxe-table-column prop="address" label="Address"></vxe-table-column>
 </vxe-table>
 </div>
</template>

<script>
export default {
 data () {
 return {
  tableData: [
  {
   id: 10001,
   name: 'test1',
   sex: 'Man',
   date: '2019-05-01',
   address: 'address abc123'
  }
  ]
 }
 }
}
</script>

总结

以上所述是小编给大家介绍的vxe-table vue table 表格组件功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
很酷的javascript loading效果代码
Jun 18 Javascript
一款js和css代码压缩工具[附JAVA环境配置方法]
Apr 16 Javascript
JS清空多文本框、文本域示例代码
Feb 24 Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
详解Puppeteer前端自动化测试实践
Feb 21 Javascript
微信小程序在ios下Echarts图表不能滑动的问题解决
Jul 10 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
vue源码中的检测方法的实现
Sep 26 Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 Javascript
VUE项目axios请求头更改Content-Type操作
Jul 24 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 #Javascript
微信小程序 swiper 组件遇到的问题及解决方法
May 26 #Javascript
vue项目打包后怎样优雅的解决跨域
May 26 #Javascript
vue实现的上拉加载更多数据/分页功能示例
May 25 #Javascript
vue实现的请求服务器端API接口示例
May 25 #Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 #Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
May 24 #Javascript
You might like
在Windows版的PHP中使用ADO
2006/10/09 PHP
php 删除记录实现代码
2009/03/12 PHP
PHP echo,print,printf,sprintf函数之间的区别与用法详解
2013/11/27 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
php中rename函数用法分析
2014/11/15 PHP
PHP微信支付实例解析
2016/07/22 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
Thinkphp5+Redis实现商品秒杀代码实例讲解
2020/12/29 PHP
图片自动更新(说明)
2006/10/02 Javascript
javascript 页面只自动刷新一次
2009/07/10 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
Javascript中的方法链(Method Chaining)介绍
2015/03/15 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
JS HTML5拖拽上传图片预览
2016/07/18 Javascript
JS仿百度自动下拉框模糊匹配提示
2016/07/25 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
详解从angular-cli:1.0.0-beta.28.3升级到@angular/cli:1.0.0
2017/05/22 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
[01:16]2014DOTA2 TI专访C9战队EE:中国五强中会占三席
2014/07/10 DOTA
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
django连接oracle时setting 配置方法
2019/08/29 Python
Python + Flask 实现简单的验证码系统
2019/10/01 Python
Python2和Python3中@abstractmethod使用方法
2020/02/04 Python
士力架广告词
2014/03/20 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
讲座新闻稿
2015/07/18 职场文书
Goland使用Go Modules创建/管理项目的操作
2021/05/06 Golang
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js