View UI与vue-element-admin记录

View UI：即原先的 iView，是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

---

vue-element-admin：是一个后台前端解决方案，它基于 vue 和 element-ui实现。它使用了最新的前端技术栈，内置了 i18 国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。

一.viewUI中 Dropdown下拉菜单与element UI中下拉菜单el-dropdown-item触发click事件不生效？

答：Dropdown与el-dropdown不是原生DOM节点，而此时绑定的click也非原生DOM事件，加上.native可以把自定义事件转变为原生的DOM事件，即给父元素的子节点们都加上这个click事件。将@click改@click.native进行监听即可。

二. DatePicker，设置开始时间和结束时间约束

根据viewUI文档配置不可选日期

html文档配置如下：

     <Row class="margin-top-15">
        <Col class="flex-item">
          <P class="search-name">申请日期</P>
          <Col span="9">
            <DatePicker
              type="date"
              :options="startTimeOptions"
              @on-change="startTimeChange"
              @on-clear="clearTime(1)"
              placeholder="开始时间"
              v-model="searchItem.beginDate"
            ></DatePicker>
          </Col>
          <Col span="1" style="text-align: center">-</Col>
          <Col span="9">
            <DatePicker
              type="date"
              :options="endTimeOptions"
              @on-change="endTimeChange"
              @on-clear="clearTime(2)"
              placeholder="结束时间"
              v-model="searchItem.endDate"
            ></DatePicker>
          </Col>
        </Col>
        <Col span="3">
          <Button long type="primary" @click="getData(1)">查询</Button>
        </Col>
      </Row>

js配置如下：

expord default {
  data(){
    return{
      startTimeOptions: {}, //开始日期设置
      endTimeOptions: {}, //结束日期设置
      searchItem: {
        beginDate: "",
        endDate: ""
      },
    };
  },
  methods:{
     //点击 x 清除时间 
     clearTime(type) {
      if (type == 1) {
        this.endTimeOptions = {
          disabledDate: (date) => {
            let startTime = this.searchItem.beginDate
              ? new Date(this.searchItem.beginDate).valueOf()
              : "";
            return date && date.valueOf() < startTime;
          },
        };
      }
    },
    startTimeChange(e) {
      //设置开始时间
      this.searchItem.beginDate = e;
      if (e == "" && this.searchItem.endDate == "") {
        this.startTimeOptions = {};
        this.endTimeOptions = {};
      } else {
        this.endTimeOptions = {
          disabledDate: (date) => {
            let startTime = this.searchItem.beginDate
              ? new Date(this.searchItem.beginDate).valueOf() -
                24 * 60 * 60 * 1000
              : "";
            return date && date.valueOf() < startTime;
          },
        };
      }
    },
    endTimeChange(e) {
      // //设置结束时间
      this.searchItem.endDate = e;
      let endTime = this.searchItem.endDate
        ? new Date(this.searchItem.endDate).valueOf()
        : "";
      if (e == "" && this.searchItem.beginDate == "") {
        this.startTimeOptions = {};
        this.endTimeOptions = {};
      } else if (this.searchItem.endDate == "") {
        this.startTimeOptions = {};
      } else {
        this.startTimeOptions = {
          disabledDate(date) {
            return date && date.valueOf() > endTime;
          },
        };
      }
    },
  }
}

三.Menu ( View UI )

动态配置左边菜单高亮显示

<template>
  <Sider hide-trigger :style="{ background: '#fff' }">
          <Menu
            :active-name="value"
            theme="light"
            width="auto"
            :open-names="['1']"
          >
            <MenuItem name="1" to="/home"> 首页 </MenuItem>
            <MenuItem name="2" to="/applicationList"> 菜单1 </MenuItem>
            <MenuItem name="3" to="/riskList"> 菜单2 </MenuItem>
          </Menu>
  </Sider>
</template> 
<script>
export default {
  data() {
    return {
      value: "1",
    };
  },
  // 动态配置左边菜单高亮显示(路由配置meta)
  beforeRouteEnter(to, form, next) {
    next((vm) => {
      vm.value = to.meta.type;
    });
  },

路由配置meta

 {
        path: "/home",
        name: "首页",
        component: homeInfo,
        meta: {
          type: "1",
        },
  }

四.view按需引用（用于html与js的组件方法，引用方式不同）

1.按需引用按装插件

npm install babel-plugin-import --save-dev

2. .babelrc 文件配置

{
  //ViewUI 按需引入配置
  "plugins": [
    [
      "import",
      {
        "libraryName": "view-design",
        "libraryDirectory": "src/components"
      }
    ]
  ]
}

3.main.js配置

import { Button, Table } from 'view-design';
import "view-design/dist/styles/iview.css";  //导入样式
//用于html里面需要用到的引用的方法
Vue.component('Button', Button);
Vue.component('Table', Table);
//用于js里面需要用到的引用方法
Vue.prototype.$Message = Message;
Vue.prototype.$Spin = Spin;

五.viewUi 导出

 exportData() {
    //导出表格部分数据
    this.$refs.table.exportCsv({
        filename: "列表1",
        columns: this.columns1.filter((col, index) => index < 9),
        data: this.exporList.filter((data, index) => index < this.total),
    });
    
    
    //导出表格全部数据
    this.$refs.table.exportCsv({
        filename: "列表2",
        columns: this.columns1,
        data: this.exporList,
    });
 }