开源Vue表格组件,表格插件源码

简介: 开源Vue表格组件,表格插件源码

开源Vue表格组件,表格插件源码


前言:
关于html里面原生的table,通常满足不了程序员的要求。所以开发了一款表格插件,其功
能有:
1 导入json格式数据后,自动填充表格。表格长宽自适应、排版优美。
2 提供分页展示功能,可以选择每页展示多少条数据。
3 提供搜索功能。
4 提供更改表名的接口。

1.表格样式


上图:

网络异常,图片无法展示
|

请访问:这里!! 查看表格插件效果。

2.如何获取该插件


1 点我上面的链接到服务器里面下载。

2 或者需要的可以点击:https://download.csdn.net/download/qq_43592352/12368568

下载。

3.如何使用该插件


在你想要引用本表格插件的html页面引入:(这些文件都在我的插件文件里)

<script src="css-js/vue.js" type="text/javascript"></script>
<script src="css-js/bootstrap.min.js" type="text/javascript"></script>
<script src="css-js/jquery-3.3.1.min.js" type="text/javascript"></script>
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="css-js/mybootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css-js/hcqtable.css"/>

在你需要表格的div容器里添加:

<div id=hcqtable v-cloak>
  <my-con  :title='title'></my-con>
  <my-con1 :list='list'></my-con1>
  <my-con2 :list='list' :shownum="shownum" :pagenum="pagenum"></my-con2>
  <my-con3 :list='list' :shownum="shownum" :pagenum="pagenum" :styles="styles"></my-con3>
</div>

最后在文件末尾:引入两个script标签

<script>
var hcqTable={
    title:'时鲜水果一览表',
    url: "http://47.103.21.63/hcqmcy/phpBack/infor-test.php"
};
</script>
<script src="css-js/hcqtable.js" type="text/javascript"></script>

提供的两个接口:

title:表格名

url:后端返回json数据的接口

json数据格式为:

[
{name:’’,ppp:’’,……},
{name:’’,ppp:’’,……},
{name:’’,ppp:’’,……},
……
]

注意事项


【1】 原创博客,转载本篇请与我联系,尊重版权。

【2】 关于阅读本篇博客的所有问题、代码源码、图片素材、编程技巧、编程经历都可联系我,与我交流讨论。

【3】 本人部分时间承接各种毕业设计、网站编写、微信小程序编写、数据库作业编写。需要请加QQ:1460787433,详聊。

相关文章
|
30天前
|
JavaScript 前端开发 API
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
vue3中常用插件的使用方法:按需引入自定义组件,自动导入依赖包,自动生成路由,自动生成模拟数据
548 0
|
1月前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
vue尚品汇商城项目-day07【vue插件-50.(了解)表单校验插件】
34 4
|
30天前
|
存储 JSON JavaScript
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
Vue.js开发中基于localStorage与sessionStorage的本地存储利器:Vue-ls插件使用详解
46 0
|
1月前
|
JavaScript 索引
vue 表格数据上下移动并增加背景色
vue 表格数据上下移动并增加背景色
34 0
|
1月前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】
33 0
|
1月前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-48.(了解)图片懒加载插件】
vue尚品汇商城项目-day07【vue插件-48.(了解)图片懒加载插件】
34 0
|
1月前
|
JavaScript
vue尚品汇商城项目-day07【vue插件-49.(了解)自定义插件】
vue尚品汇商城项目-day07【vue插件-49.(了解)自定义插件】
26 0
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
1050 0
|
5天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking?
通过以上针对 Webpack 或 Rollup 的配置方法,就可以在 Vue 项目中有效地启用 Tree Shaking,从而优化项目的打包体积,提高项目的性能和加载速度。在实际配置过程中,需要根据项目的具体情况和需求,对配置进行适当的调整和优化。
|
5天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时,性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题,并提供了优化建议,帮助开发者提高应用性能。