# JsSurelyVue
**Repository Path**: lianggit/js-surely-vue
## Basic Information
- **Project Name**: JsSurelyVue
- **Description**: 基于原生JS项目如何使用Surely Vue Table组件。
JS方式使用，VUE3 + AntDisginVue + SurelyVueTable。
SurelyVueTable是AntDisgin出品，高性能Table，且功能强大。
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 2
- **Forks**: 0
- **Created**: 2021-12-29
- **Last Updated**: 2023-05-02
## Categories & Tags
**Categories**: Uncategorized
**Tags**: Vue
## README
# Js & Surely Vue Table
文主要说明，基于原生JS项目如何使用Surely Vue Table组件。
## [Surely Vue](https://www.surely.cool/doc/guide)
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
**浏览器引入**
```html
```
对于生产环境，Vue推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏。
```html
```
### 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。你也可以通过 [](https://www.jsdelivr.com/package/npm/ant-design-vue) 或 [UNPKG](https://unpkg.com/ant-design-vue/dist/) 进行下载。
强烈不推荐使用已构建文件，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。
>注意：引入 antd.js 前你需要自行引入 [dayjs](https://day.js.org)。
```html
```
### Surely Vue Table
**版本**
2.0.7
**浏览器引入**
```html
```
对于生产环境，我们推荐链接到一个明确的版本号和构建文件，以避免新版本造成的不可预期的破坏。
```html
```
## 完整源码
### index.html
```html
Js Surely Vue
{{ message }}
```
### index.js
```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;
};
})();
// 传统项目增加全局配置变量
// 现象，pageSize，由大值切换小值，报错，如：由（200/page）切换到（10/page），会报“process***”找不到相关错误
var process = {
env:{
NODE_ENV:"production"
}
};
var page_index;
$(function () {
page_index = new Page_index();
page_index.init();
});
```
## 运行方式
```shell
# 初始化
npm install
# 启动http服务
gulp connect
```
## 参考资料及文献
[VUE3](https://v3.cn.vuejs.org/)
[Ant Design of Vue](https://www.antdv.com/docs/vue/introduce-cn/)
[Day.js](https://dayjs.gitee.io/zh-CN/)
[Surely Vue Table](https://www.surely.cool/doc/guide)