Js & Surely Vue Table

本文主要说明，基于原生JS项目如何使用Surely Vue Table组件。

很遗憾，这是一个商业化组件，不过不用担心，你依然可以免费使用它，但你不可以移除水印，当然也不可以隐藏水印。我们一直在保证 Ant Design Vue 完全开源的情况下，不断寻找靠谱的商业模式，期望通过“高端”组件集合获取一定的收入，招聘更多的技术专家，开发更多的功能。我想您也一定可以理解并支持我们，Surely Vue 的商业化将会有助于 Ant Design Vue 更快的成长。

有必要再次声明，Ant Design Vue 并不是蚂蚁金服开发和维护，自诞生之日(2017 年)起，便是由 tangjinzhou 联合众多专业开发者进行开发维护，Surely Vue 是该团队企业化运营后推出的商业产品。四年来不断的坚持得到了众多开发者的认可，您不用担心他是 KPI 产物最后弃坑，更加无须担心个人开发者跑路，因为我们有众多付费企业客户，我们有健康可持续的稳定收入。

目前，免费版有水印

插件版本说明

VUE3

版本

3.2.26

浏览器引入

<script src="https://unpkg.com/vue@next"></script>

对于生产环境，Vue推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏。

<script src="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script>

ant-design-vue

版本

ant-design-vue v3.0.0-beta.3

dayjs v1.10.7

浏览器引入

在浏览器中使用 script 和 link 标签直接引入文件，并使用全局变量 antd。

我们在 npm 发布包内的 ant-design-vue/dist 目录下提供了 antd.js antd.css 以及 antd.min.js antd.min.css。你也可以通过 jsDelivr 或 UNPKG 进行下载。

强烈不推荐使用已构建文件，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。

注意：引入 antd.js 前你需要自行引入 dayjs。

<!--  引入 antd.js 前你需要自行引入 moment。  -->
<script src="./plugins/ant-design-vue/dayjs.min.js"></script>
<!--  antd  -->
<link href="./plugins/ant-design-vue/antd.min.css" rel="stylesheet"/>
<script src="./plugins/ant-design-vue/antd.min.js"></script>

Surely Vue Table

版本

2.0.7

浏览器引入

<link href="https://unpkg.com/@surely-vue/table/dist/index.min.css" rel="stylesheet" />
<script src="https://unpkg.com/@surely-vue/table"></script>

对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏。

<link href="https://unpkg.com/@surely-vue/table@2.0.7/dist/index.min.css" rel="stylesheet" />
<script src="https://unpkg.com/@surely-vue/table@2.0.7/dist/index.umd.js"></script>

完整源码

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Js Surely Vue</title><!-- jquery --><script src="./plugins/jquery/jquery-1.12.0.min.js"></script><!--  Vue3  --><script src="https://unpkg.com/vue@3.2.26/dist/vue.global.js"></script><!--  引入 antd.js 前你需要自行引入 moment。  --><script src="./plugins/ant-design-vue/dayjs.min.js"></script><!--  antd  --><link href="./plugins/ant-design-vue/antd.min.css" rel="stylesheet"/><script src="./plugins/ant-design-vue/antd.min.js"></script><!--  @surely-vue/table Surely Vue Table 是基于 Vue 3 的组件，暂时不支持Vue 2 --><link href="https://unpkg.com/@surely-vue/table@2.0.7/dist/index.min.css" rel="stylesheet" /><script src="https://unpkg.com/@surely-vue/table@2.0.7/dist/index.umd.js"></script>
</head>
<body>
<div id="app"><h1>{{ message }}</h1><s-table:columns="columns":scroll="{ y: 500 }":data-source="dataSource"></s-table>
</div>
<script src="./index.js"></script>
</body>
</html>

index.js

/*** Js Surely Vue* Created by hankin on 2021/12/29.*/
(function () {/*** 构造方法* @constructor*/Page_index = function () {var that = this;};/*** 初始化方法* @returns {Page_index}*/Page_index.prototype.init = function () {var that = this;const columns = [{title: 'Full Name',dataIndex: 'name',},{title: 'Age',dataIndex: 'age',},{title: 'Column 1',dataIndex: 'address',},{title: 'Column 2',dataIndex: 'address',},{title: 'Column 3',dataIndex: 'address',},{title: 'Column 4',dataIndex: 'address',},{title: 'Column 5',dataIndex: 'address',},];const Counter = {data() {const data = [];for (let i = 0; i < 10000; i++) {data.push({key: i,name: `Edrward ${i}`,age: i + 1,address: `London Park no. ${i}`,});}return {message: 'Js & Surely Vue Table',dataSource: Vue.ref(data),columns: Vue.ref(columns),}}}that.app = Vue.createApp(Counter);that.app.use(STable);that.app.mount('#app');return that;};})();
var page_index;
$(function () {page_index = new Page_index();page_index.init();
});

Demo源码下载

js-surely-vue

参考资料及文献

Ant Design of Vue

Day.js

Surely Vue Table

基于原生JS项目使用Vue3 + Surely Vue Table组件相关推荐

原生html中modal,基于原生JS封装的Modal对话框插件
基于原生JS封装Modal对话框插件原生JS封装Modal对话框插件,个人用来学习原理与思想,只有简单的基本框架的实现,可在此基础上添加更多配置项 API配置 //基本语法 let modal = ...
基于原生js的图片延迟加载
当页面图片比较多的时候,我们通常会做一个延迟加载,避免页面打开时一下子的请求数太多,加载过慢影响用户体验. 如果项目用了jquery框架,则可以直接用 jquery.lazyload.可在jquery ...
基于原生js雷霆战机
本篇文章是基于原生js使用函数制作游戏预览 html部分 <!DOCTYPE html> <html lang="en"><head>< ...
原生Js弹窗插件|web弹出层组件|对话框
wcPop.js 是一款基于原生javascript开发的前端 web版弹窗组件,遵循原生 H5/css3/JS 的书写规范,简单实用.拿来即用(压缩后仅10KB).已经兼容各大主流浏览器.内含多种 ...
Ant Design Vue Table 组件合并单元格
Ant Design Vue Table 组件合并单元格项目开发中,有时候需要实现单元格合并的需求,这里记录一下在Ant Design Vue的实现. <template><div ...
基于原生js实现主流弹幕的所有功能
原生js实现弹幕效果原理二距离写实现原理一有很长一段时间了,因为好像没什么人看,所以我就不太想写原理二,为了不食言,我还是坚持做完这个系列吧下面介绍的就是目前主流直播弹幕网站的弹幕实现方式,包括 ...
基于原生JS写的异形轮播图--效果如网易云、QQ音乐播放器中轮播图
css部分 <style>#box{height:500px;width:1000px;position: relative;margin:100px auto;overflow: hid ...
原生JS项目练习——全选与全不选和反选
目录一.主要功能介绍: 二.JS代码详细步骤解析: JS代码: 三.全部代码: 感谢:@有鱼是只猫提供的视频一.主要功能介绍: 1.用原生JS实现全选:用for循环遍历每一个input,让他全部选 ...
原生JS项目练习——tab选项卡功能
一.主要功能介绍: 1.写UI结构 2.获取元素 3.for循环遍历数组,给每一个li添加一个index属性并赋值.(原因等会会总结) 4.绑定鼠标的mousemove事件,鼠标移到某个模块,将该模块 ...

基于原生JS项目使用Vue3 + Surely Vue Table组件

Js & Surely Vue Table

Surely Vue

插件版本说明

VUE3

ant-design-vue

Surely Vue Table

完整源码

index.html

index.js

Demo源码下载

参考资料及文献

基于原生JS项目使用Vue3 + Surely Vue Table组件相关推荐

最新文章

热门文章