Vue에서 umy-ui를 사용하는 방법-View.js-php.cn

Vue에서 umy-ui를 사용하는 방법

醉折花枝作酒筹

풀어 주다： 2021-04-23 09:23:41

앞으로

3372명이 탐색했습니다.

이 글에서는 vue에서 umy-ui를 사용하는 방법을 자세히 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

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 &#39;vue&#39;;
import UmyUi from &#39;umy-ui&#39;
import &#39;umy-ui/lib/theme-chalk/index.css&#39;;// 引入样式

Vue.use(UmyUi);

로그인 후 복사

주문형으로 사용하는 것이 가장 좋습니다. 프로젝트 크기를 줄이려면 babel -plugin-comComponent를 사용하여 가져오세요.

npm install babel-plugin-comComponent

3. babel.config.js에서 설정

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

로그인 후 복사

Introduce on Demand

import Vue from &#39;vue&#39;;
import {
  UTableColumn,
  UTable,
  UxGrid,
  UxTableColumn
} from &#39;umy-ui&#39;;

Vue.use(UTableColumn);
Vue.use(UTable);
Vue.use(UxGrid);
Vue.use(UxTableColumn);

로그인 후 복사

main.js에서 파일을 import하면 됩니다. 물론 위의 코드를 직접 작성할 수도 있습니다. 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 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(&#39;请求发生错误&#39;)
        }
        this.tabData = res.data
        // 调用虚拟表格reloadData方法     实现虚拟表格
        this.$refs.plxTable.reloadData(this.tabData);
      })
    }
  },
  created() {
    this.getTableData()
  },
};

로그인 후 복사