第一个项目个人总结心得(VUE+element)

VUE第一个项目个人总结心得(VUE+element)

1.插槽取值和添加条件判断

根据数据的状态显示对应的信息

//判断类型是门诊还是住院然后显示对应的号码
   <el-table-column label="门诊号或住院号" align="center" width="170">
            <template slot-scope="scope">
              <span v-if="scope.row.receptionType == '2'"> {{ scope.row.inpatientCode }} </span>
              <span v-if="scope.row.receptionType == '1'">{{ scope.row.receptionCode }}</span>
            </template>
          </el-table-column>

2.根据表格里数据的状态显示不同的颜色
根据表格里的数据状态,对应不同的颜色,让使用者更加清晰

第一步:在table标签里添加该代码用来显示颜色
:row-class-name="tableRowClassName"

第二步:在方法里添加条件 和返回的自定义样式名称
	/**作废和挂起状态颜色方法 */
			tableRowClassName({row,rowIndex}) {
				//这里是判断条件
				if (row.delFlag == 2) {
					return 'warning-row'
				}
				if (row.suspend == 2) {
					return 'warning-rows'
				}
			},
			
第三步:如果有全局方法,则需要自己定义style 否则会被覆盖
<style>
	.warning-row {
		background-color: rgb(218, 212, 212) !important;
	}

	.warning-rows {
		background-color: rgb(255, 148, 148) !important;
	}
</style>

3.vue定时器
若同时执行两个方法,会出现数据覆盖问题,此时则会使用到定时器,将某个方法延迟执行即可

setTimeout(() => {
这里放需要执行的代码片段
}, 1000) //时间自己定义,默认是毫秒

4.表格多选框

第一步:在table标签里添加改该代码表示多选框
@selection-change="handleSelectionChanges"
若需要条件可添加下列代码,该代码用来获取多选框的状态
 ref="multipleTable"

第二步:
每次点击多选框时会触发下列方法,会将选中的数据生成一个新的数组,方法里用arrs接收,
row用来接收选中的状态,下面我加了判断,如果超过两条就会提示消息并清空选中状态
			handleSelectionChanges(arrs, row) {
				/**首次为空先添加一条 */
				if (this.checkList == '') {
					this.checkList = arrs
				}
				/**判断数组长度不可超过两条*/
				if (arrs.length > 2) {
					this.$message('不允许超过2条数据')
					this.$refs.multipleTable.clearSelection(row)//满足条件清空已选中状态,此步骤需要table表格绑定ref属性
				} else {
					this.checkList = arrs
				}
			},
			

5.数组接收单条数据时的判断
当A表格选中某条数据添加到B表格里,就判断B表格里是否存在该数据

		/*添加时触发该方法*/
		scalerows(row) {
		// 第一步:判断右侧数组为空时先添加一条
				if (this.scalecontList == '') {
					this.scalecontList.push(row)
				} else {
				//第二步:如果有数据则会判断 
					/**利用filter过滤器,如果id相同则放到自己定义的数组里*/
					let arr = this.scalecontList.filter(item => {
						return item.scaleAssId == row.scaleAssId
					})
					/**判断自定义数组arr长度 */
					if (!arr.length) {
						//如果arr数组没有长度说明数据无重复,可添加
						this.scalecontList.push(row)
					} else {
						this.$message('您添加的数据已存在请勿重复添加')
						return true
					}
				}
			},

6.根据某个条件过滤掉数组中符合条件的元素
使用filter过滤器,符合条件的会被过滤

	/**过滤掉数组里名字为治疗医嘱评定的 */
					this.assessList = this.assessList.filter(item => {
						return item.assessName != '治疗医嘱评定'
					})

7.格式化时间,将时间转换成字符串

可以多个格式

//将该方法添加到生命周期里,或者全局挂载
 /** 给date添加原型方法 格式化时间格式 */
    Date.prototype.format = function (fmt) {
      //author: meizz
      let o = {
        'M+': this.getMonth() + 1, //月份
        'd+': this.getDate(), //日
        'h+': this.getHours(), //小时
        'm+': this.getMinutes(), //分
        's+': this.getSeconds(), //秒
        'q+': Math.floor((this.getMonth() + 3) / 3), //季度
        S: this.getMilliseconds() //毫秒
      }
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length))
      for (let k in o)
        if (new RegExp('(' + k + ')').test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
          )
      return fmt
    }
    

8.VUE打印插件
1.通过npm命令安装该打印插件

cnpm install vue-print-nb

2.安装完成后在全局挂在里注册该插件

3.在页面引入该插件

4.使用时注册按钮,将值绑定在div或者teble里

5.打印页面展示

6.如果打印内容不全，在打印操作时点击更多操作，然后设置缩放或调整边距：