这篇文章给大家分享的是有关怎么在vue中使用umy-ui的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联是一家专注于网站设计制作、成都网站制作与策划设计,荣昌网站建设哪家好?创新互联做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:荣昌等地区。荣昌做网站价格咨询:18982081108
Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。
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代码
{{ tableFiilter( scope.column.property, scope.row[scope.column.property] ) }}
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中使用umy-ui”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!