All Projects → x-extends → Vxe Table

x-extends / Vxe Table

Licence: mit
🐬 vxe-table vue 表格解决方案

Programming Languages

typescript
32286 projects
SCSS
7915 projects

Projects that are alternatives of or similar to Vxe Table

Jhform
JhForm - 自定义表单工具,更加简单,快捷的创建表单、设置页面
Stars: ✭ 108 (-97.45%)
Mutual labels:  switch, form, input, select, checkbox, cell
Jquery Rslitegrid
Input tabular data with your keyboard
Stars: ✭ 5 (-99.88%)
Mutual labels:  grid, table, input, cell
Formbase
Better default styles for common input elements.
Stars: ✭ 560 (-86.8%)
Mutual labels:  form, input, select, checkbox
Customalertviewdialogue
Custom AlertView Dialogue is the world's most advanced alert view library. Custom AlertView Dialogue includes simple message popups, confirmation alerts, selector popups, action sheet bottom menus, and input/feedback contact forms.
Stars: ✭ 100 (-97.64%)
Mutual labels:  form, input, modal, select
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (-44.06%)
Mutual labels:  form, table, modal, select
Flutter smart select
SmartSelect allows you to easily convert your usual form select or dropdown into dynamic page, popup dialog, or sliding bottom sheet with various choices input such as radio, checkbox, switch, chips, or even custom input. Supports single and multiple choice.
Stars: ✭ 179 (-95.78%)
Mutual labels:  switch, radio, select, checkbox
Ant Plus
🔺 Ant Design 表单简化版
Stars: ✭ 212 (-95%)
Mutual labels:  form, input, select
Gijgo
Gijgo - Free Javascript Controls
Stars: ✭ 424 (-90%)
Mutual labels:  grid, table, modal
Vue Easytable
🍉 Table Component/ Data Grid / Data Table.Support Virtual Scroll,Column Fixed,Header Fixed,Header Grouping,Filter,Sort,Cell Ellipsis,Row Expand,Row Checkbox ...
Stars: ✭ 2,501 (-41.04%)
Mutual labels:  grid, table, vue-table
Bootstrap Table
An extended table to integration with some of the most widely used CSS frameworks. (Supports Bootstrap, Semantic UI, Bulma, Material Design, Foundation, Vue.js)
Stars: ✭ 11,068 (+160.91%)
Mutual labels:  radio, table, checkbox
Prompt Checkbox
This repository has been archived, use Enquirer instead.
Stars: ✭ 21 (-99.5%)
Mutual labels:  radio, select, checkbox
ag-grid
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
Stars: ✭ 8,743 (+106.11%)
Mutual labels:  grid, vue-table, table
Vue Ui For Pc
基于Vue2.x的一套PC端UI组件,包括了Carousel 跑马灯、Cascader 级联、Checkbox 多选框、Collapse 折叠面板、DatePicker 日期选择、Dialog 对话框、Form 表单、Input 输入框、InputNumber 数字输入框、Layer 弹窗层、Loading 加载、Menu 菜单、Page 分页、Progress 进度条、Radio 单选框、SelectDropDown 仿select、Switch 开关、Table 表格、Tabs 标签页、Textarea 文本框、Tooltip 文字提示、BackTop 返回顶部、steps 步骤条、Transfer 穿梭框、Tree 树形、Upload 文件上传、Lazy 图片懒加载、Loading 加载、Pagination 分页等等
Stars: ✭ 156 (-96.32%)
Mutual labels:  form, table, select
Easy Toggle State
A tiny JavaScript library to easily toggle the state of any HTML element in any contexts, and create UI components in no time.
Stars: ✭ 261 (-93.85%)
Mutual labels:  switch, radio, checkbox
React Icheck
🔘 iCheck components built with React. Highly customizable checkbox, radio buttons and radio group.
Stars: ✭ 175 (-95.87%)
Mutual labels:  switch, radio, checkbox
Compoundbuttongroup
An Android library to easily implement compound buttons
Stars: ✭ 52 (-98.77%)
Mutual labels:  radio, grid, checkbox
Bootstrap Switch
Turn checkboxes and radio buttons in toggle switches.
Stars: ✭ 5,132 (+20.98%)
Mutual labels:  switch, radio, checkbox
react-inputs-validation
A react component for form inputs validation. Online demo examples
Stars: ✭ 48 (-98.87%)
Mutual labels:  select, checkbox, form
bootstrap5-tags
Replace select[multiple] with nices badges for Bootstrap 5
Stars: ✭ 58 (-98.63%)
Mutual labels:  select, input, checkbox
vue-gridmultiselect
Simple multi-select component with items displayed in a table like UI
Stars: ✭ 41 (-99.03%)
Mutual labels:  select, grid

vxe-table

简体中文 | 繁體中文 | English

star npm version npm build npm downloads issues issues closed pull requests pull requests closed npm license

一个基于 vue 的 PC 端表格组件,支持增删改查、虚拟列表、虚拟树、懒加载、快捷菜单、数据校验、打印导出、表单渲染、数据分页、弹窗、自定义模板、渲染器、贼灵活的配置项、扩展接口等...

  • 设计理念

    • 面向现代浏览器,高效的简洁 API 设计
    • 模块化表格、按需加载、扩展接口
    • 为单行编辑表格而设计,支持增删改查及更多扩展,强大的功能的同时兼具性能
  • 计划

    • v1.0 基于 vue2.6+,支持所有主流的浏览器,实现表格的一切实用的功能
    • v2.0 基于 vue2.6+,支持所有主流的浏览器,同时兼具功能与性能
    • v3.0 基于 vue2.6+,支持现代浏览器并保留兼容 IE11,提升渲染性能
    • v4.0 基于 vue3.0+,只支持现代浏览器,不支持 IE
    • 下一阶段:sticky 渲染模式、css 变量主题、将虚拟滚动提升到极致、虚拟滚动动态行高、数据图表可视化

QQ 交流群

qq

浏览器支持

Edge Chrome Firefox Opera Safari
Latest Latest Latest Latest 8+

功能点

  • 基础表格
  • 高级表格
  • 斑马线条纹
  • 多种边框
  • 单元格样式
  • 列宽拖动
  • 最大高度
  • 自适应宽高
  • 固定列
  • 多级表头
  • 表尾数据
  • 高亮行或列
  • 序号
  • 单选框
  • 复选框
  • 下拉选项
  • 开关
  • 排序
  • 多字段组合排序
  • 筛选
  • 合并单元格
  • 合并表尾
  • 导入/导出/打印
  • 显示/隐藏列
  • 加载中
  • 格式化内容
  • 自定义插槽 - 模板
  • 快捷菜单
  • 展开行
  • 分页
  • 表单
  • 工具栏
  • 下拉容器
  • 虚拟列表
  • 虚拟树
  • 增删改查
  • 数据校验
  • 数据代理
  • 键盘导航
  • 弹窗
  • 渲染器
  • 虚拟滚动
  • 虚拟合并
  • (pro) 单元格区域选取
  • (pro) 单元格复制/粘贴
  • (pro) 单元格查找和替换

安装

版本:vue 3.x, 依赖库:xe-utils

npm install xe-utils vxe-table@next

Get on unpkg and cdnjs

npm

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

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

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>
<!-- 建议使用 CDN 方式引入的用户在链接地址上锁定版本,避免受到非兼容性更新的影响 -->

示例

<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">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    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' }
    ])
    return {
      tableData
    }
  }
})
</script>

文档

💡 使用指南
👉 查看演示 👀备用地址
👉 查看文档 👀备用地址

运行项目

安装依赖

npm install

启动本地调试

npm run serve

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

npm run lib

License

MIT © 2019-present, Xu Liangzhan

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].