今天给大家分享一款优秀的Vue流畅渲染大数据表格组件库UmyUI。

umy-ui 基于 vue2.x 构建的高性能组件库。完美解决表格十万级大数据卡顿、编辑表格卡顿等问题。

特色

• 文档：涵盖umy-ui各个方面，给开发者方向指导和设计理念。
• 组件：众多组件覆盖开发过程的各个需求，组件功能丰富，u-table组件解决表格万级数据渲染卡顿问题。
• 布局：收集众多的常用页面和布局，减少开发者的重复工作。
• 工具库：众多的贴心小工具，让您更专注于开发。

安装

$ npm i umy-ui -S

引入组件

// 全局引入
import Vue from 'vue'
import UmyUi from 'umy-ui'
// 引入样式
import 'umy-ui/lib/theme-chalk/index.css'

Vue.use(UmyUi)

// 按需引入
import { UTable, UTableColumn } from 'umy-ui'
Vue.component(UTable.name, UTable)
Vue.component(UTableColumn.name, UTableColumn)

快速使用

<template>
  <u-table
    :data="tableData"
    :border="false"
    style="width: 100%">
    <template slot="empty">
          没有查询到符合条件的记录
    </template>
    <u-table-column
      prop="name"
      label="名字"
      width="180">
    </u-table-column>
    <u-table-column
      prop="sex"
      label="性别"
      width="180">
    </u-table-column>
    <u-table-column
      prop="age"
      label="年龄">
      <template v-slot="scope">
          <el-select v-model="scope.row.sex">
            <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
      </template>
    </u-table-column>
  </u-table>
</template>

<script>
  export default {
    data() {
      return {
        sexList: [
           { value: 1,label: '男' },
           { value: 2,label: '女'},
           { value: 3,label: '未知'}
        ],
        tableData: [{
          sex: '男',
          name: '王小虎',
          age: '15'
        }, {
          sex: '女',
          name: '王小明',
          age: '15'
        }, {
          sex: '女',
          name: '王小丽',
          age: '15'
        }, {
          sex: '未知',
          name: '王小狗',
          age: '15'
        }]
      }
    }
  }
</script>

提供丰富的文档说明（基础表格、虚拟表格、编辑表格等API）。

非常丰富的一款多功能表格+组件库，无卡顿渲染大数据表格，大家不可错过~~

最后附上项目文档及地址链接。

# 文档地址
https://www.umyui.com/

# 仓库地址
https://github.com/u-leo/umy-ui

ok，就介绍到这里。如果大家有其它优秀Vue组件库，欢迎交流讨论哈！