基于原生JS项目使用Vue3 + Surely Vue Table组件
Js & Surely Vue Table
本文主要说明，基于原生JS项目如何使用Surely Vue Table组件。
Surely Vue
Surely Vue Table 是 Ant Design Vue 团队旗下的“高端”组件之一，该组件致力于解决大数据渲染、图表集成等复杂高频问题。 使用该组件可以流畅滚动 10 万行、10 万列的数据，你不必担心页面卡顿造成用户投诉，进而影响业务进展。
该组件虽然是 Ant Design Vue 团队开发，但你依然可以将其使用在任何组件库中，它并不是 Ant Design Vue 的专属组件。
Surely Vue 默认使用虚拟滚动提升渲染速度，树形数据、展开内容、嵌套子表格、行列合并、自动行高、横向、纵向、吸顶、固定头、固定列等等一切都支持虚拟滚动。
很遗憾，这是一个商业化组件，不过不用担心，你依然可以免费使用它，但你不可以移除水印，当然也不可以隐藏水印。我们一直在保证 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/[email protected]/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。
<script src="./plugins/ant-design-vue/dayjs.min.js">script>
<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/[email protected]/dist/index.min.css" rel="stylesheet" />
<script src="https://unpkg.com/@surely-vue/[email protected]/dist/index.umd.js">script>
完整源码
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Js Surely Vuetitle>
<script src="./plugins/jquery/jquery-1.12.0.min.js">script>
<script src="https://unpkg.com/[email protected]/dist/vue.global.js">script>
<script src="./plugins/ant-design-vue/dayjs.min.js">script>
<link href="./plugins/ant-design-vue/antd.min.css" rel="stylesheet"/>
<script src="./plugins/ant-design-vue/antd.min.js">script>
<link href="https://unpkg.com/@surely-vue/[email protected]/dist/index.min.css" rel="stylesheet" />
<script src="https://unpkg.com/@surely-vue/[email protected]/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
参考资料及文献
VUE3
Ant Design of Vue
Day.js
Surely Vue Table