一、下载umy-ui umy-ui开发文档

npm install umy-ui || yarn add umy-ui

二、创建存放umy-ui的文件 umy-ui.js

//完整引入
import Vue from 'vue';
import UmyUi from 'umy-ui'
import 'umy-ui/lib/theme-chalk/index.css';// 引入样式Vue.use(UmyUi);

最好使用按需引入，借助 babel-plugin-component，以达到减小项目体积的目的。

npm install babel-plugin-component

三、在babel.config.js中进行设置

module.exports = {presets: ['@vue/app'],plugins: [["component", {'libraryName': "umy-ui","styleLibraryName": "theme-chalk"}, "umy-ui"]]
}

按需引入

import Vue from 'vue';
import {UTableColumn,UTable,UxGrid,UxTableColumn
} from 'umy-ui';Vue.use(UTableColumn);
Vue.use(UTable);
Vue.use(UxGrid);
Vue.use(UxTableColumn);

在main.js中导入一下文件即可，当然以上代码也可以直接写到main.js中

四、umy-ui.js的优势

最大的好处是使用虚拟表格，当数据非常之庞大的时候，用虚拟表格不会显得卡顿

HTML代码

<template><div class="about-layout"><!-- ref :                     可以用来绑定数据,做虚拟表格height:                   绑定高度，若不绑定，自适应高度show-header-overflow      标题过长，是否显示省略号show-overflow             内容过长时显示为省略号    border                    显示纵向边框 selection-change          监听用户选择了哪行,可以用于多选--><ux-gridref="plxTable":height="$store.state.plxTableHeightOne":show-header-overflow="true":show-overflow="true"@selection-change="selectVehicleInfo"border><!-- tableHead:              表格标题的数据列表resizable:              列是否允许拖动列宽调整大小title:                  设置表格的标题field:                  设置表格的显示内容sortable:               是否允许列排序--><!-- 使用插槽，可以对数据进行过滤相当于覆盖了field的值--><ux-table-column type="checkbox" width="40" />     //监听用户选择了哪行,可以用于多选<ux-table-columnv-for="(item, index) in tableHead"min-width="120"align="center":resizable="true":key="index":title="item.label":field="item.prop":sortable="item.sortable"><template slot-scope="scope">//针对 喝 这一列进行操作     比如可以更改颜色<div v-if="scope.column.property === 'drink'":style="drinkStyle(scope.column.property)">{{tableFiilter(scope.column.property,scope.row[scope.column.property])}}</div><div v-else>{{tableFiilter(scope.column.property,scope.row[scope.column.property])}}</div></template></ux-table-column></ux-grid></div>
</template>

JS代码

export default {data() {return {// 标题列表数据tableHead: [{label: "吃",prop: "eat", //需要对应数据中的字段名，否则无效sortable: true,//是否需要排序},{label: "喝",prop: "drink", //需要对应数据中的字段名，否则无效},{label: "玩",prop: "play", //需要对应数据中的字段名，否则无效sortable: true,//是否需要排序},],// 过滤吃的数据eatObj: {D: "饭",Y: "包子",R: "馒头",S: "辣条",},tabData:[]};},props: {},methods: {//过滤表格    value === D   Y  R  S    过滤一下//prop   字段名             value   字段值tableFiilter(prop, value) {        //可封装成通用方法//没内容时，自动填充'-'if(val === '' || val === undefined || val === null){return '-'}else{//内容过滤if (prop === "eat") {return this.eatObj[value];}else{return value}}},//喝 字段值样式操作drinkStyle(value){if(value === '水'){return {color:'green'}}}//用户选择的行selectVehicleInfo(selection){console.log(selection)}// 获取数据getTableData(){let params = {page:1,pageSize:10}getTableData(params).then(res => {if(res.code !== 200){return this.$Message('请求发生错误')}this.tabData = res.data// 调用虚拟表格reloadData方法     实现虚拟表格this.$refs.plxTable.reloadData(this.tabData);})}},created() {this.getTableData()},
};

tip

过滤那个方法可以封装一下

Vue 之使用umy-ui虚拟表格相关推荐

vue + elment ui打印表格数据
vue + elment ui打印表格数据主要的原理就是在vue项目中通过调用浏览器自带的打印功能,完成对table数据的打印解决表格错位以及elment ui 双重表头的问题封装一下打印 ...
【vue】Element UI实现表格表头纵向显示
element实现表格表头纵向显示我们正常使用Element UI写表格的时候,<el-table-column/> 标签里面都是纵向的.那么我们的需求有时候会要求行列转换,那么来看看咋 ...
【分享】Vue 资源典藏（UI组件、开发框架、服务端、辅助工具、应用实例、Demo示例）...
Vue 资源典藏,包括:UI组件开发框架服务端辅助工具应用实例 Demo示例 element ★11612 - 饿了么出品的Vue2的web UI工具套件 Vux ★7503 - 基于Vue和 ...
element ui设置表格表头高度和每一行的高度
填坑记录:今天用element ui的表格组件做用户信息展示,直接拉取的官网的代码过来,发现表头和每一行都太高了,如下: 因为第一次使用element ui的表格组件,不太清楚会遇到这样的坑,以为能轻 ...
大数据量树形数据表格展示, 虚拟表格,el-table, umy-ui, 表格懒加载
1. 出现的问题要展示树形数据表格,根据当前点击的表格行去请求新的数据并展示, 基于这种情况遇到以下问题 1). 当树形表格数据层级大于五级且数据量较多时, 浏览器崩溃 2). 当数据条数展示超出5 ...
vue3+Naive UI数据表格基本使用方式
一.基础使用方式 1.引入表格及数据 <-- 表格标签 --> <n-data-table :bordered="false" :single-line=&quo ...
用vue优雅地编写UI组件的几条指导原则
前言最近在尝试写几个UI组件,并通过阅读element-ui的源码,与其反复比较,然后认真思考,最后总结出一些自己的一些心得和体会.在造轮子的过程中,既巩固了html,css,js基础,又加深了对v ...
iView 3.3.0 发布，基于 Vue.js 的企业级 UI 组件库
iView 3.3.0 发布了,代号 Transistor ,iView 是一套基于 Vue.js 的企业级 UI 组件库,主要服务于 PC 界面的中后台产品. 本次更新如下: https://www ...
npm创建Vue工程【element UI】
npm创建Vue工程[element UI] 步骤 # 初始化一个名为 hello-vue 的Vue工程 vue init webpack hello-vue# 进入 hello-vue 工程 cd ...

Vue 之使用umy-ui虚拟表格

一、下载umy-ui umy-ui开发文档

二、创建存放umy-ui的文件 umy-ui.js

三、在babel.config.js中进行设置

四、umy-ui.js的优势

HTML代码

JS代码

tip

Vue 之使用umy-ui虚拟表格相关推荐

最新文章

热门文章

Vue 之 使用umy-ui虚拟表格

一、下载umy-ui umy-ui开发文档

二、创建存放umy-ui的文件 umy-ui.js

三、在babel.config.js中进行设置

四、umy-ui.js的优势

HTML代码

JS代码

tip

Vue 之 使用umy-ui虚拟表格相关推荐

最新文章

热门文章

Vue 之使用umy-ui虚拟表格

Vue 之使用umy-ui虚拟表格相关推荐