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

最新推荐文章于 2024-05-20 15:26:42 发布

m0_54850467

最新推荐文章于 2024-05-20 15:26:42 发布

阅读量1.4k

点赞数

分类专栏：前端 html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_54850467/article/details/123394379

版权

前端同时被 2 个专栏收录

47 篇文章 2 订阅

订阅专栏

html

47 篇文章 1 订阅

订阅专栏

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/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

参考资料及文献

m0_54850467

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
基于原生JS项目使用Vue3 + Surely Vue Table组件

Js & Surely Vue Table本文主要说明，基于原生JS项目如何使用Surely Vue Table组件。Surely VueSurely Vue Table 是 Ant Design Vue 团队旗下的“高端”组件之一，该组件致力于解决大数据渲染、图表集成等复杂高频问题。使用该组件可以流畅滚动 10 万行、10 万列的数据，你不必担心页面卡顿造成用户投诉，进而影响业务进展。该组件虽然是 Ant Design Vue 团队开发，但你依然可以将其使用在任何组件库中，它并不是 An
复制链接

扫一扫

专栏目录