代码拉取完成，页面将自动刷新
文主要说明，基于原生JS项目如何使用Surely Vue Table组件。
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 产物最后弃坑，更加无须担心个人开发者跑路，因为我们有众多付费企业客户，我们有健康可持续的稳定收入。
目前，免费版有水印
版本
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 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。你也可以通过 或 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>
版本
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>
<!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>
/**
* 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();
});
# 初始化
npm install
# 启动http服务
gulp connect
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手