【vue】常用信息总结（一）

一、禁止选择今天之后的日期：pickerOptions

 <el-date-picker
   v-model="receiptDate"
   type="date"
   :value-format="yyyy-MM-dd"
   placeholder="接收日期"
   :picker-options="pickerOptions"
   class="myInput"
   clearable
 ></el-date-picker>

 data() {
   return {
     pickerOptions: {
       disabledDate(time) {
         return time.getTime() > Date.now();
       },
     },
   };
 },

二、el-checkbox在列表中的某个值不展示：computed

<el-checkbox-group v-model="readerList" class="group">
  <el-checkbox
    v-for="data in lists(roleList, '管理员')"
    :label="data"
    :key="data"
    @change="handleCheckChange('reader', data,$event)">
    {{data}}
  </el-checkbox>
</el-checkbox-group>

computed: {
  lists() {
    return (item, name) => {
      return item.filter(item => item !== name)
    }
  }
},

 data() {
   return {
     roleList: [
       '管理员', '技术支持', '项目经理'
     ],
   };
 },

三、截取字符串：.slice

var value = '请输入姓名'
console.log(value.slice(3)) // 输出：姓名

四、el-table 内容折行：white-space

<el-table-column label="推进状况" header-align="center" min-width="20%">
	<template slot-scope="scope">
		<div style="white-space: pre-wrap">{{getProcessInfo(scope.row)}}</div>
	</template>
</el-table-column>

五、即时重绘表格：doLayout();

this.$nextTick(() => {
	this.$refs.seltableData.doLayout();
});

六、过滤list：.find

listChange(row) {
	let that = this
	row.credentialApplyId = that.credentialSourceList.find(item => item.id == row.credentialSourceId).credentialApplyId
	row.credentialNameId = ''
	row.credentialNameList = that.credentialNameMapList.find(item => item.credentialSourceId == row.credentialSourceId).credentialNameMapList
},

七、element ui 双击表格展示输入框 修改数据

链接: 参考地址

1. 在table标签里添加3个方法

@cell-dblclick="celldbClick"
:row-class-name="tableRowClassName"
:cell-class-name="tableCellClassName"

2. data里

clickRow: null, // 当前点击的行
clickCell: null, // 当前点击的列

3. 表格

<el-table-column label="备注" header-align="center" min-width="25%">
	<template slot-scope="scope">
		<el-input
			:id="scope.row.index + ',' + scope.column.index"
			v-if="scope.row.index === clickRow && scope.column.index === clickCell"
			v-model="scope.row.remark" 
			@blur="inputBlur" 
		/>
		<span v-else>{{scope.row.remark}}</span>
	</template>
</el-table-column>

4. methods里

celldbClick(row, column, cell, event){
	let that = this
	that.clickRow = row.index;
	that.clickCell = column.index;
	this.$nextTick(() => {
		document.getElementById(that.clickRow + ',' + that.clickCell).focus();
	}) // 需要设置焦点
},
// 失去焦点初始化
inputBlur(row, event, column) {
	let that = this
	that.clickRow = null;
	that.clickCell = null;
},
tableRowClassName({ row, rowIndex }) {
	row.index = rowIndex;
},
tableCellClassName({ row, column, rowIndex, columnIndex }) {
	column.index = columnIndex + 1;
}

八、message使用html格式：（dangerouslyUseHTMLString: true）

this.$alert('序列号重复无法申请<br/>序列号：123','提示',{confirmButtonText: '确定', dangerouslyUseHTMLString: true })

九、动态添加组件到html，计算文字宽度

// 根据最多能显示的按钮的状态计算列宽
// maxButtonTextCount：所有按钮显示的文字数量
// maxButtonCount: 按钮的个数
// 逻辑：整体左右各留3个汉字的位置，按钮之间留4个汉字的位置
labelWidthSet(maxButtonTextCount, maxButtonCount) {
	var span = document.createElement('span')
	span.innerHTML = '、'.padStart(6 + maxButtonTextCount + (maxButtonCount - 1) * 4, '、')
	document.body.appendChild(span)
	var labelWidth = span.offsetWidth * window.devicePixelRatio
	document.body.removeChild(span)
	return labelWidth
},

十、输入框自动撑满整个控件

/* 自定义输入框 检索条件区域*/
.myInput {
	width:100% !important;
}
.myInput .el-input {
	width:100% !important;
}
.myInput .el-input__inner {
	width:100% !important;
}
.myInput .el-input-group__append {
	background-color: #409EFF; // 后缀的背景色
}