Vue2.0基础跟部分组件使用（不定期更新）

element赋值默认值后无法选择其他日期

this.$set(this.tempRow,'beginTime','2023-09-21 08:00')
this.$set(a,b,c)
仨参数 a：要改变值的对象、数组； b：要改动的字段key；c：新值
例：
var tempStart = {name:10};
this.$set(tempStart ,'name',30)
console.log(tempStart.name)//打印出来为 30

若依框架中js代码中获取字典表的数据

this.dict.label['dict_name']//{dict_value:dict_label},
this.dict.type['dict_name']{label:'',value:'',...}

element表格多选变单选

 this.$refs.serviceCheckTableDC.clearSelection();
 this.$refs.serviceCheckTableDC.toggleRowSelection(selection.pop())

页面传值

//传
this.$router.push(
  {
    path: "/purchase/index/" + id + "/" + this.serviceKind + "/" + this.titleName,
    query: {
      mItem: this.checkedServiceItem
    }
  }
);
//接
this.$route.params.id
this.$route.query.mItem

//打开新界面
let routeUrl = this.$router.resolve({
     path: "/home/idex",
     query: {id:96}
   });
window.open(routeUrl.href, '_blank');
//接
this.$route.query.id

动态渲染界面表单

<template>
  <div>
    <div>
      <button @click="addDate">添加数据</button>
    </div>
    <!-- 渲染页面 -->
    <div v-for="item in peopleList" :key="item.id">
      <div class="dis-r">
        <div>
          姓名：
          <input type="text" v-model="item.name" />
        </div>
        <div class="ml10">
          年龄：
          <input type="text" v-model="item.age" />
        </div>
        <button class="ml10" @click="deleteDate(item.id)">删除</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      peopleList: []
    };
  },
  methods: {
    addDate() {
      this.peopleList.push({
        name: "",
        age: "",
        //这里的id是为了自己本地维护页面数据
        id: new Date().getTime()
      });
    },
    deleteDate(id) {
      var idx = this.peopleList.findIndex(item => item.id == id);
      if (idx != -1) {
        this.peopleList.splice(idx, 1);
      }
    }
  }
};
</script>

<style scoped>
.dis-r {
  display: flex;
  flex-direction: row;
}
.dis-c {
  display: flex;
  flex-direction: column;
}
.ml10{
  margin-left: 10px;
}
</style>

select 的model值回显问题

//骚年 请看看你的model跟你的value值 是不是一个数字一个字符串 

获取页面的宽高

	width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

vue监听路由变化 数值变化

watch: {
       $route(to, from){
           console.log('路由变化了')
           console.log('当前页面路由：' + to);
           console.log('上一个路由：' + from);
       },
   }

监听数值值变化

watch：{
	handlerStrOrNum(newVal,oldVal){
		console.log(newValue);
	}
}

监听VUEX中数值的变化

  import {mapGetters} from "vuex";
  computed: {
    ...mapGetters([
      'sidebar',
    ]),
    sidebarIsOpen() {
      return this.sidebar.opened
    }
  },
  watch: {
    sidebarIsOpen(e, o) {
      console.log("?????????????????")
    }
  },

VUEX的使用

安装 npm install vuex@next --save

使用

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
//调取方法
this.$store.commit('increment')
//获取方法
this.$store.state.count
//多module情况取值
this.$store.state.[moduleName].count
//页面中使用
<div> {{ $store.state.count }} </div>

el-table导出Excel表格

安装

npm i file-saver xlsx 

使用

// main.js中 这里弄成了全局变量
import * as FileSaver from "file-saver";
import * as XLSX from "xlsx";
Vue.prototype.mXLSX = XLSX
Vue.prototype.mFileSaver = FileSaver

··· 记得将el-table中的id设置一下 ···
	var wb = this.mXLSX.utils.table_to_book(document.querySelector("#out-table"));
      wb.Sheets.Sheet1["!cols"] = [
        {wch: 16},
        {wch: 16},
        {wch: 16},
        {wch: 16},
        {wch: 16},
      ]
      var tempRow = []
      for (var i = 0; i < this.tableList.length + 1; i++) {
        tempRow.push({
          hpx: 30
        })
      }
      for (const key in wb.Sheets.Sheet1) {
        if (key.indexOf("!") === -1 && wb.Sheets.Sheet1[key].v) {
          wb.Sheets.Sheet1[key].s = {
            horizontal: "center",
            vertical: "center",
            // wrap_text: true,
          }
        }
      }
      wb.Sheets.Sheet1["!rows"] = tempRow
      /* 获取二进制字符串作为输出 */
      var wbout = this.mXLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });

      try {
        this.mFileSaver.saveAs(
          //Blob 对象表示一个不可变、原始数据的类文件对象。
          //Blob 表示的不一定是JavaScript原生格式的数据。
          //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
          //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
          new Blob([wbout], {type: "application/octet-stream"}),
          //设置导出文件名称
          `xxx报表${Number(new Date())}.xlsx`
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;

treeselect禁止选中父节点

:disable-branch-nodes="true"

空数组去除

removeEmptyChildren (node) {
  node.forEach(item => {
    if ('children' in item && item.children.length === 0) {
      delete item.children
    } else if ('children' in item && item.children.length) {
      this.removeEmptyChildren(item.children)
    }
  })
  return node
},

el-tree使用(自定义 item长度过长加tooltip提示)

<el-tree
  :data="deptOptions"
  :props="defaultProps"
  :expand-on-click-node="false"
  :filter-node-method="filterNode"
  ref="tree"
  default-expand-all
  highlight-current
  @node-click="handleNodeClick"
>
   <span class="custom-tree-node" slot-scope="{ node, data }">
     <el-tooltip class="item" :disabled="node.label.length<15" effect="dark" :content="node.label" placement="top">
     	<span class="fs14">{{node.label}}</span>
     </el-tooltip>
   </span>
</el-tree>

若依项目中 el-menu默认选中第一个子节点

//在 @select="handleSelect" 方法中加入
//默认选中第一个子菜单逻辑start-------------
var idxLast = this.$route.path.lastIndexOf('/')
if (this.$route.path.substring(0,idxLast)!==route.path){
  if (route.children&&route.children.length>0){
    var tempRouter = null
    for (var i = 0; i <route.children.length ; i++) {
      if (route.children[i].hidden==false){
        tempRouter = route.children[i]
        break
      }
    }
    setTimeout(()=>{
      this.$router.push({
        path:tempRouter.path
      })
    },100)
  }
}else {
  console.log("相同菜单再点就不触发选中第一个了")
}
//默认选中第一个子菜单逻辑end-------------

el-tree选中默认的子节点

//1.设置 node-key="id"  这里的值就是你的数据主键的key名称
//2.调用 this.$refs.tree.setCurrentKey(treeNodeId)
//需要注意的是2.这个步骤在动态加载数据的时候有时会不生效 
//那是因为Vue数据渲染还没完成  就去调用 直接导致找不到nodeId但是el-tree又不会报错
//解决方法就是 延迟加载150ms更好 欺骗一下用户的感官 因为根本就感觉不出来
 setTimeout(()=>{
   this.$refs.tree.setCurrentKey(this.mineQuery.id)
 },150)

el-date-picker 限制选择时间区间段

:picker-options="rangeTimeDisabledDate"

_this.rangeTimeDisabledDate = {
  disabledDate(time) {//这玩意不能省 不然不生效 虽然里面没逻辑},
  onPick(maxMin) {
    _this.startChoose = maxMin.minDate
    console.log(maxMin)
    _this.rangeTimeDisabledDate.disabledDate = function (dat) {
      var temp = new Date(_this.startChoose)
      const oneMonthLong= 30 * 24 * 60 * 60 * 1000
      var max = temp.getTime() + oneMonthLong
      temp.setMonth(temp.getMonth() + 11)
      return new Date(_this.startChoose) - oneMonthLong> dat.getTime() || max < dat.getTime()
    }
  }
}

el-row el-col中使用 el-form-item 错乱

//这种情况一般是因为el-select的高度问题 这里的解决办法稍显鸡肋
// el-row el-col 中放大缩小界面 el-select会使el-col乱套
// 但是如果将el-input__inner的height缩小到32px就可以避免
.el-form-item {
  .el-input--medium .el-input__inner {
    height: 32px !important;
    line-height: 32px !important;
  }

  .el-select .el-input, .el-input.is-disabled .el-input__inner {
    height: 32px !important;
    line-height: 32px !important;
  }
}

.el-input-group__append {
  height: 31px !important;
  line-height: 31px !important;

  .el-select .el-input .el-input__inner {
    height: 31px !important;
    line-height: 32px !important;
  }
}

vue混入用法

比如若依每个界面都需要一个查看功能 就可以使用现有的form去实现

//创建myMix.js
export var myMix = {
  data: function () {
    return {
      edit: false,
    }
  },
  activated() {
    this.edit = true
  },
  methods: {
    lookView(row) {
      this.title = '查看详情'
      this.form = row
      this.open = true
      this.edit = false
    }
  }
}
//然后在要使用的界面添加
import {myMix} from "@/assets/utils/myMix";
//mixins 跟data created methods平级
mixins: [myMix],
//表格页面添加查看按钮
<el-button
   size="mini"
   type="text"
   icon="el-icon-view"
   @click="lookView(scope.row)"
 >查看
 </el-button>
使用混入的edit去控制界面的显示效果
<el-dialog @close="edit = true">
<el-form ref="form" :model="form" :disabled="!edit">
<div slot="footer" class="dialog-footer" v-show="edit">

vue的一些三方库

vue-seamless-scroll

//贼丝滑的无缝自动左右上下滑动的插件
//做出来big满满

似echarts三方库 dataV

多平台快速开发的UI框架 uView

element 这个做前端的应该都知道 element

有赞前端团队开源的移动端组件库Vant