一个功能强大、好看的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>

js

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

框架集成图标

使用示例

基础表格

     <vxe-toolbar>
          <template #buttons>
            <vxe-button @click="allAlign = 'left'">居左</vxe-button>
            <vxe-button @click="allAlign = 'center'">居中</vxe-button>
            <vxe-button @click="allAlign = 'right'">居右</vxe-button>
          </template>
        </vxe-toolbar>

        <vxe-table
          :align="allAlign"
          :data="tableData1">
          <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>

固定表头

        <vxe-table
          border
          height="400"
          :data="demo1.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-column field="address" title="Address" show-overflow></vxe-column>
        </vxe-table>

复杂表格-自定义模板、插槽

        <vxe-toolbar>
          <template #buttons>
            <vxe-button>{{ $t('app.body.button.insert') }}</vxe-button>
            <vxe-button>
              <template #default>下拉按钮</template>
              <template #dropdowns>
                <vxe-button>删除</vxe-button>
                <vxe-button>保存</vxe-button>
              </template>
            </vxe-button>
          </template>
          <template #tools>
            <vxe-input v-model="demo1.value2" placeholder="搜索"></vxe-input>
          </template>
        </vxe-toolbar>

        <vxe-table
          border
          show-footer
          ref="xTable"
          height="500"
          :column-config="{resizable: true}"
          :footer-method="footerMethod"
          :data="demo1.tableData"
          @checkbox-change="checkboxChangeEvent"
          @checkbox-all="checkboxChangeEvent">
          <vxe-column type="checkbox" width="60"></vxe-column>
          <vxe-column type="seq" width="160" :resizable="false" show-overflow>
            <template #header>
              <div class="first-col">
                <div class="first-col-top">名称</div>
                <div class="first-col-bottom">序号</div>
              </div>
            </template>
            <template #footer="{ items, _columnIndex }">
              <vxe-button status="primary" @click="clickFooterItem(items, _columnIndex)" size="mini">支持</vxe-button>
              <vxe-button @click="clickFooterItem(items, _columnIndex)" size="mini">test abc</vxe-button>
            </template>
            <template #default="{ row }">
              <vxe-button @click="showDetailEvent(row)">弹框{{ row.name }}</vxe-button>
            </template>
          </vxe-column>
          <vxe-column field="name" title="app.body.label.name" sortable>
            <template #default="{ row }">
              <a href="https://github.com/x-extends/vxe-table" target="_black">我是超链接：{{ row.name }}</a>
            </template>
          </vxe-column>
          <vxe-column field="sex" title="app.body.label.sex" :filters="[{data: ''}]" :filter-method="filterSexMethod">
            <template #header>
              <span style="color: red;">自定义头部</span>
            </template>
            <template #footer="{ items, _columnIndex }">
              <span style="color: red">累计：{{ items[_columnIndex] }}</span>
            </template>
            <template #filter="{ $panel, column }">
              <input class="my-filter" type="type" v-model="option.data" v-for="(option, index) in column.filters" :key="index" @input="changeFilterEvent($event, option, $panel)">
            </template>
            <template #default="{ row }">
              <span>{{ row.sex }} </span>
              <vxe-button type="text">编辑</vxe-button>
              <vxe-button type="text">删除</vxe-button>
            </template>
          </vxe-column>
          <vxe-column field="time" title="Time">
            <template #header>
              <vxe-input v-model="demo1.value1" placeholder="放个输入框" size="mini"></vxe-input>
            </template>
            <template #default="{ row, rowIndex }">
              <template v-if="rowIndex === 2">
                <vxe-switch v-model="row.flag"></vxe-switch>
              </template>
              <template v-else-if="rowIndex === 3">
                <vxe-switch v-model="row.flag" open-label="开" close-label="关"></vxe-switch>
              </template>
              <template v-else>
                <span>{{ formatDate(row.time) }}</span>
              </template>
            </template>
          </vxe-column>
          <vxe-column field="address" title="Address" show-overflow>
            <template #default="{ row, rowIndex }">
              <template v-if="rowIndex === 1">
                <vxe-select v-model="row.flag1" transfer>
                  <vxe-option value="Y" label="是"></vxe-option>
                  <vxe-option value="N" label="否"></vxe-option>
                </vxe-select>
              </template>
              <template v-else>
                <a href="https://github.com/x-extends/vxe-table">{{ row.name }}</a>
              </template>
            </template>
          </vxe-column>
          <vxe-column field="html1" title="Html片段" width="200" show-overflow>
            <template #default="{ row }">
              <span v-html="row.html1"></span>
            </template>
            <template #footer>
              <span>
                <img src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif" style="width: 36px;">自定义模板<img src="https://n.sinaimg.cn/sinacn17/w120h120/20180314/89fc-fyscsmv5911424.gif" style="width: 30px;">
              </span>
            </template>
          </vxe-column>
          <vxe-column field="img1" title="图片路径" width="120">
            <template #default="{ row }">
              <img v-if="row.img1" :src="row.img1" style="width: 100px;">
              <span v-else>无</span>
            </template>
          </vxe-column>
        </vxe-table>

        <vxe-pager
          perfect
          v-model:current-page="demo1.tablePage.currentPage"
          v-model:page-size="demo1.tablePage.pageSize"
          :total="demo1.tablePage.total"
          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
          <template #left>
            <span class="page-left">
              <vxe-checkbox v-model="demo1.isAllChecked" :indeterminate="demo1.isIndeterminate" @change="changeAllEvent"></vxe-checkbox>
              <span class="select-count">自定义模板 {{ demo1.selectRecords.length }} 条</span>
              <vxe-button>修改</vxe-button>
              <vxe-button>管理</vxe-button>
              <vxe-button>删除</vxe-button>
              <vxe-button size="small">
                <template #default>更多操作</template>
                <template #dropdowns>
                  <vxe-button type="text">批量修改</vxe-button>
                  <vxe-button type="text">批量管理</vxe-button>
                  <vxe-button type="text">批量删除</vxe-button>
                </template>
              </vxe-button>
            </span>
          </template>
          <template #right>
            <img src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif" height="34">
            <img src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif" height="34">
            <img src="https://pic2.zhimg.com/50/v2-f7031359103859e1ed38559715ef5f3f_hd.gif" height="34">
          </template>
        </vxe-pager>

        <vxe-modal v-model="demo1.showDetails" title="查看详情" width="800" height="400" resize>
          <template #default>{{ demo1.selectRow ? demo1.selectRow.name : '' }}</template>
        </vxe-modal>
        

表格编辑

<vxe-table
          border
          show-overflow
          ref="xTable"
          :column-config="{resizable: true}"
          :loading="demo1.loading"
          :data="demo1.tableData"
          :edit-config="{trigger: 'manual', mode: 'row'}">
          <vxe-column type="seq" width="60"></vxe-column>
          <vxe-column field="name" title="Name" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.name" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="role" title="Role" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.role" type="text" placeholder="请输入昵称"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="sex" title="Sex" :edit-render="{}">
            <template #default="{ row }">
              <span>{{ formatSex(row.sex) }}</span>
            </template>
            <template #edit="{ row }">
              <vxe-select v-model="row.sex" transfer>
                <vxe-option v-for="item in demo1.sexList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
              </vxe-select>
            </template>
          </vxe-column>
          <vxe-column field="sex2" title="多选下拉" :edit-render="{}">
            <template #default="{ row }">
              <span>{{ formatMultiSex(row.sex2) }}</span>
            </template>
            <template #edit="{ row }">
              <vxe-select v-model="row.sex2" multiple transfer>
                <vxe-option v-for="item in demo1.sexList" :key="item.value" :value="item.value" :label="item.label"></vxe-option>
              </vxe-select>
            </template>
          </vxe-column>
          <vxe-column field="num6" title="Number" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.num6" type="number" placeholder="请输入数值"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="date12" title="Date" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.date12" type="date" placeholder="请选择日期" transfer></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="date13" title="Week" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.date13" type="week" placeholder="请选择日期" transfer></vxe-input>
            </template>
          </vxe-column>
          <vxe-column field="address" title="Address" :edit-render="{}">
            <template #edit="{ row }">
              <vxe-input v-model="row.address" type="text"></vxe-input>
            </template>
          </vxe-column>
          <vxe-column title="操作" width="160">
            <template #default="{ row }">
              <template v-if="$refs.xTable.isEditByRow(row)">
                <vxe-button @click="saveRowEvent(row)">保存</vxe-button>
                <vxe-button @click="cancelRowEvent(row)">取消</vxe-button>
              </template>
              <template v-else>
                <vxe-button @click="editRowEvent(row)">编辑</vxe-button>
              </template>
            </template>
          </vxe-column>
        </vxe-table>

树形表格

<vxe-table
          show-overflow
          ref="xTree3"
          border="inner"
          :row-config="{isHover: true, useKey: true}"
          :show-header="false"
          :data="demo3.tableData"
          :checkbox-config="{labelField: 'name'}"
          :scroll-y="{enabled: false}"
          :tree-config="{transform: true, accordion: true, line: true, iconOpen: 'fa fa-minus-square-o', iconClose: 'fa fa-plus-square-o'}">
          <vxe-column type="checkbox" tree-node>
            <template #default="{ row }">
              <span>
                <template v-if="row.children && row.children.length">
                  <i class="tree-node-icon fa" :class="$refs.xTree3.isTreeExpandByRow(row) ? 'fa-folder-open-o' : 'fa-folder-o'"></i>
                </template>
                <template v-else>
                  <i class="tree-node-icon fa fa-file-o"></i>
                </template>
                <span>{{ row.name }}</span>
              </span>
            </template>
          </vxe-column>
          <vxe-column title="操作" width="140">
            <template #default="{ row }">
              <vxe-button type="text" icon="fa fa-eye"></vxe-button>
              <vxe-button type="text" icon="fa fa-edit"></vxe-button>
              <vxe-button type="text" icon="fa fa-trash-o" @click="removeRowEvent(row)"></vxe-button>
              <vxe-button type="text" icon="fa fa-id-card-o"></vxe-button>
            </template>
          </vxe-column>
        </vxe-table>

高级表格-反转表格

<vxe-grid class="reverse-table" v-bind="gridOptions2"></vxe-grid>

表单表格

<vxe-grid ref='xGrid' v-bind="gridOptions"></vxe-grid>

好了，组件就给大家介绍到这边了，更多的具体功能，大家可以自己去实践。

Gtihub: https://github.com/x-extends/vxe-table