纯原生使用vxe-table-摩杜云开发者社区

Vxe-table是一个开源的，专业的基于Vue的表格工具，相比于ElementUI，Vxe-table的表格功能更加的丰富。

现在大多数的文章都是基于前端脚手架来开发的，这里，我为了照顾，不用使用前端脚手架或者不想用前端脚手架的同学，介绍一下，怎么用纯原生的方式来开发vxe。

首先，我们必须要把相关的Vue的JS，Vxe-table的JS和Vxe-table的样式导入进来，可以使用CDN导入，如下

<!-- 引入样式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vxe-table/lib/style.css">
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入组件 -->
<script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
<script src="https://cdn.jsdelivr.net/npm/vxe-table"></script>

因为这些文件比较大，所以建议下载到本地再加载。

如：

<!-- 引入样式 -->
<link rel="stylesheet" href="lib/vxe-table.css">
<!-- 引入vue -->
<script src="lib/vue.global.js"></script>
<!-- 引入组件 -->
<script src="lib/xe-utils-3.5.13.js"></script>
<script src="lib/vxe-table.js"></script>

首先，我们先新建一个Vue的应用，

let app = Vue.createApp({
            data() {
                return {
                    tableData: [
                        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
                        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
                    ],
                    gridOptions: {
                        border: true,
                        columns: [
                        { type: 'seq', width: 50 },
                        { field: 'name', title: 'Name', slots: { default: 'name' } },
                        { field: 'sex', title: 'Sex', showHeaderOverflow: true },
                        { field: 'address', title: 'Address', showOverflow: true }
                        ],
                        data: [
                        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
                        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
                        ]
                    }
                }
            }
        });

接下来，使用Vxe-table，就要使用Vue.use，把Vxe-table作为Vue的插件。

app.use(VXETable);

最后把Vue的应用，挂载到页面元素就大功告成了。

app.mount('#app');

最后的效果：

纯原生使用vxe-table_Javascript

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vxe测试</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="lib/vxe-table.css">
    <!-- 引入vue -->
    <script src="lib/vue.global.js"></script>
    <!-- 引入组件 -->
    <script src="lib/xe-utils-3.5.13.js"></script>
    <script src="lib/vxe-table.js"></script>
</head>
<body>
    <div id="app">
        <vxe-table border :data="tableData">
            <vxe-column type="seq" width="60"></vxe-column>
            <vxe-column field="name" title="Name">
              
            </vxe-column>
            <vxe-column field="sex" title="Sex"></vxe-column>
            <vxe-column field="age" title="Age"></vxe-column>
          </vxe-table>
  
          
    </div>
    <script>
        let app = Vue.createApp({
            data() {
                return {
                    tableData: [
                        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
                        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
                    ],
                    gridOptions: {
                        border: true,
                        columns: [
                        { type: 'seq', width: 50 },
                        { field: 'name', title: 'Name', slots: { default: 'name' } },
                        { field: 'sex', title: 'Sex', showHeaderOverflow: true },
                        { field: 'address', title: 'Address', showOverflow: true }
                        ],
                        data: [
                        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: 28, address: 'test abc' },
                        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: 22, address: 'Guangzhou' },
                        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: 32, address: 'Shanghai' },
                        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: 24, address: 'Shanghai' }
                        ]
                    }
                }
            }
        });
        app.use(VXETable);
        app.mount('#app');
    </script>
</body>
</html>