一个功能强大、好看的vue表格组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了一个功能强大、好看的vue表格组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

今天给大家推荐一个好用、强大的Vue表格扩展组件。

项目简介

这是支持Vue 3/Vue 2的一个表格组件，支持表格增删改、虚拟表格、复杂表格、树形表格、数据校验、懒加载、分页、弹窗、单元格样式设置、按钮自定义样式、表头样式、单元格合等功能。

组件兼容各大浏览器、高效整洁的API设计、模块化表格。

版本介绍

1、支持Vue3.0、Vue2.0版本，2.0版本已暂停升级。

2、支持自定义主题

3、支持国际化

4、支持按需加载、扩展接口

安装方法

npm安装

  npm install xe-utils vxe-table@next

 import { App, createApp } = 'vue'
        import 'xe-utils'
        import VXETable from 'vxe-table'
        import 'vxe-table/lib/style.css'

        function useTable (app: App) {
          app.use(VXETable)          // 给 vue 实例挂载内部对象，例如：
          // app.config.globalProperties.$XModal = VXETable.modal
          // app.config.globalProperties.$XPrint = VXETable.print
          // app.config.globalProperties.$XSaveFile = VXETable.saveFile
          // app.config.globalProperties.$XReadFile = VXETable.readFile
        }        createApp(App).use(useTable).mount('#app')

CDN

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

快速入门

页面

       <vxe-table border :data="tableData">
          <vxe-column type="seq" width="60"></vxe-column>
          <vxe-column field="name" title="Name">
            <template #default="{ row }">
              <span>自定义插槽模板 {{ row.name }}</span>
            </template>
          </vxe-column>
          <vxe-column field="sex" title="Sex"></vxe-column>
          <vxe-column field="age" title="Age"></vxe-column>
        </vxe-table>

        <vxe-grid v-bind="gridOptions">
          <template #name="{ row }">
            <span>自定义插槽模板 {{ row.name }}</span>
          </template>
        </vxe-grid>

      exportdefault {
          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' }
                ]
              }
            }
          }
        }