[JavaScript知识库]Element-ui一些不被注意到的小技巧

不是多么牛逼的技巧，只是一些很容易被遗忘，查找起来不方便的属性，记录以备不时之需

1. 修改Table表头颜色

想要更改表头颜色
只要在<el-table>里加入 :header-cell-style="{background:'red'}"即可

<el-table :header-cell-style="{background:'red'}"></el-table>

2. 关闭dialog的简便写法

如果点击dialog的关闭按钮就是单纯的关闭，不涉及别的逻辑，我之前都是这么写的

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  :before-close="handleClose">
</el-dialog>

handleClose(done) {
  this.dialogVisible = false;
}

但其实它是有简便写法的

<el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  :before-close="(done)=>{done()}">
</el-dialog>

即可
而不用绑定一个方法了

3. dialog停止滚动 点击空白处不关闭 关闭销毁元素

<el-dialog
   lock-scroll
  :close-on-click-modal="false"
  :destroy-on-close="true
</el-dialog>

4. checkbox自定义选中未选中的值

这个一直都有，但是我从来都没注意到，所以记录一下

<el-checkbox
   v-model="status"
   true-label="1"
   false-label="0"
>是否选择</el-checkbox>

5. Upload

• 获取上传列表
  this.$refs.uploadref.uploadFiles

6. 时间选择器不得大于当前日期

<el-date-picker
  v-model="editInfotmatin.residenceDate"
  value-format="yyyy-MM-dd"
  format="yyyy-MM"
  type="month"
  placeholder="选择日期"
  :picker-options="pickerOptionsBefore"
></el-date-picker>

//注意这个picker-options绑定的是属性而不是methods里的方法
data() {
  pickerOptionsBefore: {
	disabledDate(time) {
	  return time.getTime() > Date.now();
	},
  },
}

7. 限制el-input只能输入数字

有时候我们想让输入框只能输入数字，但是又不想使用el-input-number

很多人就会给el-input加上type=“number” 属性，但这么是行不通的，有很多问题，很多特殊字符还是可以输入，写方法又太麻烦。这个时候其实我们只需要一行代码就能解决了

加上 oninput="value = value.replace(/[^\d]/g, '')"即可

<el-input 
  v-model="input" 
  oninput="value = value.replace(/[^\d]/g, '')">
</el-input>