x-extends / vxe-table Goto Github PK

View Code? Open in Web Editor NEW

7.2K 99.0 1.0K 238.65 MB

vxe-table vue 表单/表格解决方案

Home Page: https://vxetable.cn

License: MIT License

JavaScript 0.76% HTML 0.29% SCSS 14.60% TypeScript 84.35%

vxe-table vue table form toolbar grid pager modal cell editable

vxe-table's Introduction

vxe-table

简体中文 | 繁體中文 | English

一个基于 vue 的 PC 端表单/表格组件，支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、JSON 配置式...

设计理念
- 面向现代浏览器，高效的简洁 API 设计
- 模块化表格、按需加载
- 为单行编辑表格而设计，支持增删改查及更多扩展，强大的功能的同时兼具性能
计划
- ~~v1.0 基于 vue2.6，支持所有主流的浏览器，实现表格的一切实用的功能~~
- ~~v2.0 基于 vue2.6，支持所有主流的浏览器，同时兼具功能与性能~~
- v3.0 基于 vue2.6，支持现代浏览器并保留兼容 IE11
- v4.0 基于 vue3.x，只支持现代浏览器，不支持 IE
- 下一阶段：sticky 渲染模式、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化

浏览器支持


80+ ✔	80+ ✔	90+ ✔	75+ ✔	10+ ✔

功能点

安装

版本：vue 3.x

npm install vxe-table@next

Get on unpkg and cdnjs

npm

import { createApp } from 'vue'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'

createApp(App).use(VXETable).mount('#app')

CDN

使用第三方 CDN 方式记得锁定版本号，避免受到非兼容性更新的影响
不建议将第三方的 CDN 地址用于正式环境，因为该连接随时都可能会失效

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

示例

<template>
  <div>
    <vxe-table :data="tableData">
      <vxe-column type="seq" title="Seq" width="60"></vxe-column>
      <vxe-column field="name" title="Name"></vxe-column>
      <vxe-column field="role" title="Role"></vxe-column>
      <vxe-colgroup title="Group1">
        <vxe-column field="sex" title="Sex"></vxe-column>
        <vxe-column field="address" title="Address"></vxe-column>
      </vxe-colgroup>
    </vxe-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const tableData = ref([
  { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', address: 'Shenzhen' },
  { id: 10002, name: 'Test2', role: 'Test', sex: 'Man', address: 'Guangzhou' },
  { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', address: 'Shanghai' }
])
</script>

在线文档

👉 官网文档

参与文档完善、补充详细文档

💡 官网文档源码

QQ 交流群

该群供大家交流問題，如果群人数已满，将会不定期剔除不活跃的。

运行项目

安装依赖

npm run update

启动本地调试

npm run serve

编译打包，生成编译后的目录：es,lib

npm run lib

License

vxe-table's People

Contributors

Stargazers

Watchers

Forkers

wang-ya-hui sheasong tiger54910 1084195820 walkerchan008 yuanqgit cuilongshui anydu mfg521 mxh330 jieme jgrain freehobo weinre liy05 onepenny contychen menuhin nanedo kikyou1217 alinew tourist-chenhao lawsong metlive liushengyu pjsource cc-do awesome-javascript cjluzzl annaehan dmcdoudou yelog maggie1375 yourroot gspandy w578202450 tangzhiqiang jia2007124 arvindown liushengbin csyrunnoob shixued xiongqqjq jiaxing0105 julescesar xlz26296 clytzel lemovel 24e linjiefe xbo729 whczs hotthink tiancliu eddiewudi matthewle3 lev12d zdxweb yangangzhang andersonyali hanxiao123 wangwenjie1314 zxwendy sakahiro 1024053131 laurocky xujiazheng jamesxiao2016 dev-zhiou og-118-ao mvpleung liujun6280 chonglaimuyou tchigher journeyc java131313 budding888 majoker 648873509 passheep lihongyuanyuan whitegit henrywong-fe manpenghui yinkai12321 corgisyj wxw1314 cloveryuan vebin 328015946 baitcenter ysya feixiangcao gevinyang emmaluo2 kkkman22 bjsaner juneman shawchen08 wangdianwu

vxe-table's Issues

API中的某些方法貌似没有

描述 Describe
vxe-table api 中的getAllRecords()，getSelectRecords()不可用
electron 下使用

请提供能重现问题的链接（jsfiddle、jsrun） Expected behavior

请填写以下版本信息 please complete the following information

浏览器版本: electron: 2.0.4
vue: 2.5.16
vxe-table: 0.7.3

可以提供手动触发cellClassName执行的方法吗

异步滚动分页加载数据后，发现只有第一页被标色了，后面的页的数据没有。但是通过日志，看到后面页数据渲染时候，cellclassname方法的标色的代码有被执行，实际上却没标上色

怎么只在引入js文件的情况下，使用Elementui渲染？

描述 Describe
不使用webpack打包，只在单文件中引入vxe-table的情况下，怎么实现elementui渲染？

请提供能重现问题的链接（jsfiddle、jsrun） Expected behavior

请填写以下版本信息 please complete the following information

vue: ?
vxe-table: ?

column的id 有bug，在下一个路由里面会递增

column的id 有bug，在下一个路由里面会递增，在本页面只刷新数据也会一直递增，不会重置，只有刷新正个页面，id从会从0再开始递增，可以提供一个重置column的id的方法吗?

下一步的页面id 起步就是103了，沿着上一个页面递增的。

使用<keep-alive>后，再动态组件里面有空白

在keep-alive里面的vxe-table，滚动到其他位置再切换回来，是空白。如图（因子集是一个表格），先垂直滚动vxe-table到一定的位置，然后切换其他的tab，再点回来，vxe-table显示的空白，

`

删除行导致选中异常

问题描述 Describe the bug
表格拓展功能删除行，当选中两行时，调用删除行后，再去选择数据，select-change时间返回的数据还包含已删除的数据

重现问题的步骤 To Reproduce

请提供能重现问题的链接（jsfiddle、jsrun） Expected behavior

报错信息或截图 Error message or screenshots

期望的结果 Expected behavior

请填写以下版本信息 please complete the following information

vue: ?
vxe-table: ?

列可视化渲染时候，拿不到真实的columnIndex，拿到的是可视区的index

vxe-table 0.9.3

更新最新版本0.9.14后，数据都出不来了，又撤回到0.9.3了

实际上已经102了

作者大大帮忙看看

选中210X3-5、210X3-6 ，横向拖动滚动条时候，选中的项不断的往后移动，因为headerCellClassName 函数里面的回调columnIndex 不是真实的数据index，到最后210X14-6被选中了。。

可视化渲染在分页加载数据时候未起作用，所有行全部渲染了

可视化渲染在分页加载数据时候未起作用，所有行全部渲染了。分页大小30，每次请求数据30条，然后用 this.$refs.xTable.insertAt(list,-1) 的方法增量填充数据，同样的配置和代码，换成reload(list)，可视化渲染起作用了，值渲染了配置的那么多行。

使用vxe-table-plugin-element渲染ElAutocomplete无效

描述 Describe
看了下vxe-table-plugin-element的文档，说是支持ElAutocomplete，结果没有渲染出来，也不清楚问题出在了哪，而且还没有报错

请提供能重现问题的链接（jsfiddle、jsrun） Expected behavior

Edit表格-数据校验row, 数据校验不通过, 鼠标移开后, 不通过的数据也保存了.

问题描述 Describe the bug
场景: 比如我点击编辑按钮, 激活了row的可编辑状态, 其中有一列是带非空校验的, 但是我不填写内容, 鼠标一挪开input, 空的内容也保存了,.

重现问题的步骤 To Reproduce

请提供能重现问题的链接（jsfiddle、jsrun） Expected behavior

报错信息或截图 Error message or screenshots

期望的结果 Expected behavior

请填写以下版本信息 please complete the following information

浏览器版本: 谷歌浏览器版本 74.0.3729.169（正式版本）（32 位）?
vue: 2.6.6?
vxe-table: 0.9.02?

数据验证没有提示信息

描述 Describe
数据验证没有提示信息,验证失败了只是一个红框,没有message的提示
验证失败也不会像示例代码一样左上角有红色小箭头

问题重现
https://codepen.io/ahmczsy/pen/JQoMGX

请填写以下版本信息 please complete the following information

浏览器版本: chrome 75
vue: 2.6.10
vxe-table: 1.0.1

table中自定义模板要怎么拿到index下标值呢！麻烦了

描述 Describe
如果提供信息不详细的作者可能不会答复及解决！

请提供能重现问题的链接（jsfiddle、jsrun） Expected behavior

请填写以下版本信息 please complete the following information

浏览器版本: ?
vue: ?
vxe-table: ?

vxe-grid添加的toolbar工具栏样式显示不出来

生成toolbar的代码不一样，

刷新新增新增并激活标记/取消删除选中移除保存导出.csv

而例子上生成的代码：

刷新新增新增并激活标记/取消删除选中移除保存导出.csv

是哪里出问题呢？

column prop为某些值时输入框不可编辑

问题描述 Describe the bug
vxe-table-column的prop参数位某些字符串时，其下的可编辑输入框不可编辑

<vxe-table-column
            label="描述"
            min-width="240"
            prop="price"
            :edit-render="{name: 'ElInput'}"
            >
            <template v-slot:edit="{ row }">
              <el-input v-model="row.remark"></el-input>
            </template>
            <template v-slot="{ row }">{{row.remark}}</template>
</vxe-table-column>
const item = {
  baseUnit: '',
  code: '',
  componentId: '',
  componentSpec: '',
  count: 0,
  id: '',
  materialSpecifications: '',
  materielCode: '',
  materielId: '',
  materielName: '',
  modelId: '',
  name: '',
  price: 0,
  reasonId: [],
  reasonName: '',
  remark: '',
  supplemenorderId: '',
  unit: ''
}

prop为remark时输入框不可编辑，为price时可编辑
重现问题的步骤 To Reproduce

请提供能重现问题的链接（jsfiddle、jsrun） Expected behavior

报错信息或截图 Error message or screenshots

期望的结果 Expected behavior

请填写以下版本信息 please complete the following information

浏览器版本: ?
vue: ?
vxe-table: ?

还没加入项目中去，正研究下用到项目中合不合适。主要是感谢作者的贡献，以前一直用的boostrap table，现在改用vue，这个功能比较类似

描述 Describe

请提供能重现问题的链接（jsfiddle、jsrun） Expected behavior

请填写以下版本信息 please complete the following information

vue: ?
vxe-table: ?

使用element集成后，select选择框和日期选择框无法选择

<template>
  <div style="width: 1000px; margin: 0 auto">
    <vxe-table
      border
      show-all-overflow
      show-footer
      class="vxe-table-element"
      height="400"
      :loading="loading"
      :data.sync="tableData"
      :edit-config="{key: 'id', trigger: 'click', mode: 'cell', showIcon: false}"
    >
      <vxe-table-column
        prop="name"
        label="ElInput"
        min-width="140"
        align="center"
        header-align="center"
        :edit-render="{type: 'default'}"
      >
        <template v-slot:edit="{ row }">
          <el-input size="small" v-model="row.name"></el-input>
        </template>
      </vxe-table-column>
      <vxe-table-column
        prop="age"
        label="ElInputNumber"
        width="160"
        :edit-render="{type: 'default'}"
      >
        <template v-slot:edit="{ row }">
          <el-input-number size="small" v-model="row.age"></el-input-number>
        </template>
      </vxe-table-column>
      <vxe-table-column prop="sex" label="ElSelect" width="140" :edit-render="{type: 'default'}">
        <template v-slot:edit="{ row }">
          <el-select v-model="row.sex" @change="change">
            <el-option
              v-for="item in sexList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </template>
        <template v-slot="{ row }">{{ getSelectLabel(row.sex, sexList) }}</template>
      </vxe-table-column>
      <vxe-table-column prop="date" label="ElDatePicker" width="200" :edit-render="{type: 'default'}">
        <template v-slot:edit="{ row }">
          <el-date-picker v-model="row.date" type="date" format="yyyy/MM/dd"></el-date-picker>
        </template>
        <template v-slot="{ row }">{{ formatDate(row.date, 'yyyy/MM/dd') }}</template>
      </vxe-table-column>
    </vxe-table>
  </div>
</template>
<script>
import XEUtils from "xe-utils";
export default {
  name: "about",
  data() {
    return {
      loading: false,
      tableData: [],
      sexList: [{ label: "男", value: '0' }, { label: "女", value: '1' }],
      regionList: []
    };
  },
  created() {
    this.loading = true;
    setTimeout(() => {
      let list = window.MOCK_DATA_LIST.slice(0, 5);
      this.tableData = list;
      this.loading = false;
    }, 500);
  },
  methods: {
    change(val) {
      console.log(val) // 这里选择不上
    },
    footerMethod({ columns, data }) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return "平均";
          }
          if (["age", "rate"].includes(column.property)) {
            return XEUtils.mean(data, column.property);
          }
          return "-";
        }),
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return "和值";
          }
          if (["age", "rate"].includes(column.property)) {
            return XEUtils.sum(data, column.property);
          }
          return "-";
        })
      ];
    },
    getSelectLabel (value, list, valueProp = 'value', labelProp = 'label') {
      let item = XEUtils.find(list, item => item[valueProp] === value)
      return item ? item[labelProp] : null
    },
    formatDate (value, format) {
      return XEUtils.toDateString(value, format)
    },
  }
};
</script>

请填写以下版本信息 please complete the following information

浏览器版本: chrome 74.0.3729.131
vue: "vue": "^2.6.10",
vxe-table: "vxe-table": "^0.9.10",

大数据模式，表格多选时，getSelectRecords返回值总是空数组

Please, add english translation

这个新特性和一个问题相关吗？简单描述下，比如我什么场景下，需要解决什么问题，发现表格不支持这个功能 Is your feature request related to a problem? Please describe.

描述下，你希望得到的什么解决方案 Describe the solution you'd like

是否有不错的替代方案 Describe alternatives you've considered

bug了，大于0.8.2版本，type=index 以及 slot里面取seq，都显示的有问题

bug了，大于0.8.2版本，type=index 以及 slot里面取seq，都显示的有问题，切换回0.8.2版本正常

更新到最新版本后，大数据表格渲染出不来了

vxe 0.9.14
看文档里面都是使用的vxe-grid的方式

我使用的是和之前版本差不多的vxe-table的方式，<0.9.3版本的是可以的，大于这个版本的，数据渲染不出来。一样的代码之前版本可以渲染出表格，新版本就不行。

element ui 自定义模板插槽的值报undefined

问题描述 Describe the bug

重现问题的步骤 To Reproduce

请提供能重现问题的链接（jsfiddle、jsrun） Expected behavior

报错信息或截图 Error message or screenshots

期望的结果 Expected behavior

请填写以下版本信息 please complete the following information

浏览器版本: ?
vue: ?
vxe-table: ?

vxe-grid支持自定义column吗，vxe-table 列滚动渲染在新版本里面失效了

vxe-grid支持自定义column吗，文档里面海量数据都是用vxe-grid来实现的。新版本不支持vxe-table 实现海量数据吗，我试了下10000列用vxe-table，横向的滚动渲染不生效？

这个新特性和一个问题相关吗？简单描述下，比如我什么场景下，需要解决什么问题，发现表格不支持这个功能 Is your feature request related to a problem? Please describe.
需要在动态列名下生成列的分组，不用的报表列头分组不同，所以需要动态渲染，之前自己在vue-element-extends下自定义组件实现的，现在是否可以在vxe-table中增加这个功能

描述下，你希望得到的什么解决方案 Describe the solution you'd like
是否考虑增加动态定义列的分组，目前只能动态定义列，但是不能定义列的分组，是否可以增加group的属性[{ prop:‘group1', label:'分组1' }]这种模式来实现。

是否有不错的替代方案 Describe alternatives you've considered