上传
<el-upload class="avatar-uploader" action="上传地址" headers="headers" :file-list="filesList" :limit="5" :on-exceed="handleExceed" accept=".jpg,.png,.BMP" :before-upload="beforeUpload" :before- remove="beforeRemove" :on-remove="handleRemove" :on-preview="handlePreview" :on-success="handleSuccess">
<div class="uploader f-a f-j">
<div>
<i class="el-icon-circle-plus-outline"></i>
<el-col class="upload-center">选择附件</el-col>
</div>
</div>
</el-upload>
<script>
// 上传
// 文件超出个数限制
handleExceed() {
this.$notify({
title: "警告",
message: "达到最大创建数,不可以创建更多了",
type: "warning",
});
},
// 文件上传之前
beforeUpload(file) {
console.log(file);
},
// 文件删除之前
beforeRemove(file, fileList) {
console.log(file, fileList);
},
// 文件删除
handleRemove(file, fileList) {
console.log(file, fileList);
this.data.courseFileUrls = []
this.data.courseFileNames = []
fileList.forEach(element => {
this.data.courseFileUrls.push(element.response.msg)
this.data.courseFileNames.push(element.name)
});
},
// 点击已上传文件
handlePreview(file) {
console.log(file);
},
// 文件上传成功
handleSuccess(response, file, fileList) {
console.log(response, file, fileList);
},
</script>
el-table文字超出,解决办法
show-overflow-tooltip
<el-table-column
prop="createTime"
label="提交时间"
show-overflow-tooltip
>
</el-table-column>
el-table文字居中
- 单行居中
<el-table-column prop="time" label="考勤修改" width="500" align="center">
</el-table-column>
- 全部居中
<el-table
:data="tableData"
:header-cell-style="{'text-align':'center'}"
:cell-style="{'text-align':'center'}"
style="width: 100%">
</el-table>
MessageBox 弹框VNode自定义的使用
const h = this.$createElement;
var self = this;
this.$msgbox({
title: "操作确认",
message: h("p", null, [
h("span", null, `是否执行${self.text}操作`),
h("input", {
domProps: {
value: self.value,
type: "text",
},
on: {
input: function (event) {
self.value = event.data;
self.$emit("input", event.target.value);
},
},
}),
]),
showCancelButton: true,
confirmButtonText: "确定",
cancelButtonText: "取消",
}).then(() => {
this.$emit("confirm", this.id);
this.$emit("value", this.value);
});