Home > Article > Web Front-end > How to use umy-ui in vue
This article will give you a detailed introduction to how to use umy-ui in vue. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.
1. Download umy-ui http://www.umyui.com/
npm install umy-ui || yarn add umy-ui
2. Create a file to store 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);
It is best to use on-demand import and use babel-plugin-component to reduce the size of the project.
npm install babel-plugin-component
3. Set up in babel.config.js
module.exports = { presets: [ '@vue/app' ], plugins: [ ["component", { 'libraryName': "umy-ui", "styleLibraryName": "theme-chalk" }, "umy-ui"] ] }
Introduce on demand
import Vue from 'vue'; import { UTableColumn, UTable, UxGrid, UxTableColumn } from 'umy-ui'; Vue.use(UTableColumn); Vue.use(UTable); Vue.use(UxGrid); Vue.use(UxTableColumn);
In main. Just import the file into js. Of course, the above code can also be written directly into main.js, but the code is not that elegant.
4. The biggest The advantage is to use virtual tables. When the data is very large, using virtual tables will not appear laggy
HTML code
<template> <p class="about-layout"> <!-- ref : 可以用来绑定数据,做虚拟表格 height: 绑定高度,若不绑定,自适应高度 show-header-overflow 标题过长,是否显示省略号 show-overflow 内容过长时显示为省略号 border 显示纵向边框 --> <ux-grid ref="plxTable" :height="$store.state.plxTableHeightOne" :show-header-overflow="true" :show-overflow="true" border > <!-- tableHead: 表格标题的数据列表 resizable: 列是否允许拖动列宽调整大小 title: 设置表格的标题 field: 设置表格的显示内容 sortable: 是否允许列排序 --> <!-- 使用插槽,可以对数据进行过滤 相当于覆盖了field的值 --> <ux-table-column v-for="(item, index) in tableHead" min-width="120" :resizable="true" :key="index" :title="item.label" :field="item.prop" :sortable="item.sortable" > <template slot-scope="scope"> {{ tableFiilter( scope.column.property, scope.row[scope.column.property] ) }} </template> </ux-table-column> </ux-grid> </p> </template>
JS code
export default { data() { return { // 标题列表数据 tableHead: [ { label: "吃", prop: "eat", //需要对应数据中的字段名,否则无效 }, { label: "喝", prop: "drink", //需要对应数据中的字段名,否则无效 }, { label: "玩", prop: "play", //需要对应数据中的字段名,否则无效 }, ], // 过滤吃的数据 eatObj: { D: "饭", Y: "包子", R: "馒头", S: "辣条", }, tabData:[] }; }, props: {}, methods: { //过滤表格 value === D Y R S 过滤一下 //prop 字段名 value 字段值 tableFiilter(prop, value) { if (prop === "eat") { return this.eatObj[value]; } }, // 获取数据 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() }, };
Recommended learning:vue.js tutorial
The above is the detailed content of How to use umy-ui in vue. For more information, please follow other related articles on the PHP Chinese website!