Element UI 笔记

Form

• 回车提交

<el-form @keyup.enter.native="handleConfirm">

• 表单验证

<el-form :model="user" :rules="rules" ref="form">
    <el-form-item label="姓名" prop="name">
        <el-input v-model="user.name"></el-input>
    </el-form-item>
 
    <el-form-item label="地址" prop="address">
        <el-input v-model="user.address"></el-input>
    </el-form-item>
</el-form>

data() {
	return {
		user: { name: "", address: ""},
		rules: {
		    name: [ {required: true, message: "请输入姓名", trigger: "blur"} ],
		    address: [ {required: true, message: "请输入地址", trigger: "blur"} ]
		}
	}
},
methods() {
	handleConfirm() {
	    this.$refs.form.validate((valid) => {
	        if (valid) {
	            // 校验通过的逻辑，一般就是进行 HTTP 请求
	        }
	    });
	},
}

Table

• 多选框列

<el-table>
    <el-table-column type="selection" width="55"></el-table-column>
</el-table>

• 表格高度

height 固定高度

max-height 流体高度

• 删除表格的底部 border

element ui 通过 border-bottom 增加了表格底部边框，可以通过覆盖样式去除。

table 本身具有 cell-style 属性，可以传递 Function 进行配置

cellStyle() {
	return {
		'border-bottom': 'none !important'
	}
}

Upload 上传

• 照片墙

案例见官网

• 用户头像上传（base64 编码）

<el-upload
  action="#"
  class="avatar-uploader"
  :auto-upload="false"
  :show-file-list="false"
  :on-change="handleChangePhoto"
  :headers="{ token: $cookie.get('token') }">
  <img v-if="person.person_photo" :src="`data:image/jpeg;base64,${person.person_photo}`" class="avatar"/>
  <i v-else class="el-icon-plus avatar-uploader-icon"/>
</el-upload>

el-upload 属性说明

属性	值	说明
action	#	必填，此处不自动上传，设置为任意值
auto-upload	false	选取文件之后，不自动上传
show-file-list	false	不显示上传列表
on-change	handleChangePhoto	处理照片重新选择的情况，调用函数转换为 base64
headers		有些上传需要携带令牌参数等

handleChangePhoto(file, fileList) {
  const _this = this
  const reader = new FileReader()
  reader.onload = function(e) {
    const index = this.result.indexOf(',', 0)
    _this.person.person_photo = this.result.substr(index + 1)
  }
  reader.readAsDataURL(file.raw)
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}