本篇文章給大家詳細介紹一下在vue中使用umy-ui的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
1.下載umy-ui http://www.umyui.com/
npm install umy-ui || yarn add umy-ui
2.建立存放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
3.在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中，但是程式碼就沒有那麼優雅了
4.最大的好處是使用虛擬表格，當資料非常龐大的時候，用虛擬表格不會顯得卡頓
HTML程式碼
<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程式碼
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()
},
};推薦學習：vue.js教學
以上是如何在vue中使用umy-ui的詳細內容。更多資訊請關注PHP中文網其他相關文章！
