最近，部署到开发环境（Linux上）遇到个问题，即：饿了么element ui 全选checkox失效问题。
在本地build和dev启动，一切正常，初步结论：估计是环境问题导致。
另外，在解决过程中，发现在服务器升element ui至最新版 1.3.1，竟然也可可以了。。。
但是，蛋疼的是，无意中，发现elment ui 不同版本，存在一些组件用法不差异,，如dialog，上传组件~
elementui升级至1.3.1注意问题
Element 版本API
1.3版本:
1）http://element.eleme.io/1.3/#/zh-CN/component/dialog
2）http://element.eleme.io/1.1/#/zh-CN/component/upload
1.1版本：
1）http://element.eleme.io/1.1/#/zh-CN/component/dialog
2）http://element.eleme.io/1.3/#/zh-CN/component/upload
注意用法区别
1.3.1 dialog实例：
<template>
<div>
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
title="提示1.3.1"
:visible.sync="dialogVisible"
size="tiny"
:before-close="handleClose">
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false">确定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
}
},
methods: {
handleSelectionChange(val) {
this.multipleSelection = val;
},
handleClose(done) {
this.$confirm('确认关闭？')
.then(_ => {
//done();
this.dialogVisible = false;
})
.catch(_ => {});
}
}
}
</script>
的
区别：
1.1版本是根据v-model绑定是否显示隐藏
1.3版本是:visible.sync属性
<!--<el-dialog :title="editFormTtile" v-model="editFormVisible" @close="hideDialog">--> <el-dialog :title="editFormTtile" :visible.sync="editFormVisible" @close="hideDialog">
=============
附录：1.1版本源码实例
<!--文章编辑界面-->
<template>
<!--<el-dialog :title="editFormTtile" v-model="editFormVisible" @close="hideDialog">-->
<el-dialog :title="editFormTtile" :visible.sync="editFormVisible" @close="hideDialog">
<el-form :model="editForm" label-width="150px" :rules="editFormRules" ref="editForm" id="editForm">
<el-row>
<el-col :span="24">
<el-form-item label="文章标题" prop="resName">
<el-input v-model="editForm.resName" placeholder="请输入文章标题" auto-complete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="排序">
<el-input v-model="editForm.orderId" placeholder="请输入排序" auto-complete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="文件简介">
<el-input v-model="editForm.intro" placeholder="请输入文章简介" auto-complete="off"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="文章内容" prop="content">
<v-editor :input-content="inputContent" :upload-url="uploadUrl" v-model="editForm.content" name="content"></v-editor>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="附件信息">
<el-upload
class="upload-demo"
action="/dlsys/portal/console/cms/dir/uploadAdArchive"
:on-preview="handlePreview"
:headers="setHeaders"
:on-remove="handleRemove"
:on-success="uploadSuccess"
:default-file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<!--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click.native="hideDialog">取消</el-button>
<el-button type="primary" @click.native="editSubmit" :loading="editLoading">{{btnEditText}}</el-button>
</div>
</el-dialog>
</template>
<script>
import conentApi from '../../../api/conent'
import Editor from '../../../componnets/wangEditor/Editor.vue'
export default {
components: {
'v-editor': Editor,
},
data() {
return {
setHeaders:{
Token: this.$Utils.getCookie("xdUserLoginToken")
},
fileList: [], //默认已上传的文件列表
HfileList:[], //上传的数据
editFormVisible: false,//编辑界面显是否显示
editFormTtile: '编辑',//编辑界面标题
inputContent: '', // 设置编辑器原本内容
uploadUrl: '/dlsys/portal/console/cms/dir/uploadAdArchive?Token='+this.$Utils.getCookie("xdUserLoginToken"), // 设置编辑器图片上传地址
//编辑界面数据
editForm: {
id: '',
resName: '',
orderId: '',
intro: '',
content: '',
archiveIds:''
},
editLoading: false,
btnEditText: '提交',
editFormRules: { //校验规则
resName: [
{ required: true, message: '请输入文章标题'}
]
}
};
},
created(){
this.$bus.$off('H_content_articleDialogShow');
this.$bus.$on('H_content_articleDialogShow', (title,data) => {
this.dialogShow(title,data);
})
},
methods: {
handleRemove(file, fileList) { //删除附件上传
var _name = file.name;
for(var i= 0,len = this.HfileList.length; i<len; i++){
if(_name == this.HfileList[i].name){
this.HfileList.splice(i,1);
break;
}
}
},
handlePreview(file) {
console.log(file);
var _name = file.name;
var _id = '';
for(var i= 0,len = this.HfileList.length; i<len; i++){
if(_name == this.HfileList[i].name){
_id = this.HfileList[i].id;
break;
}
}
console.log("id:"+_id+";name:"+_name);
var _down_url = '/dlapi/cms/archive/download?id='+_id+'&fullPath=';
//location.href = _down_url;
},
handleChange(file, fileList) {
},
beforeUpload(file){
var _this = this;
console.log(file)
/*const isExcel = (file.type ==='application/vnd.ms-excel' || file.type==='application/vnd.openxmlformats-officedocument.spreadsheetml.sheet');
const isLt2M = file.size / 1024 / 1024 < 2;
if(!isExcel){
_this.$message({
type:'warning',
message:'上传文件只能是Excel'
});
return false;
}
if(!isLt2M){
_this.$message({
type:'warning',
message:'上传Excel文件大小不能超过2MB'
});
return false;
}
return isExcel && isLt2M;*/
},
uploadSuccess(res, file, fileList){
var _this = this;
//console.log(res);
//console.log(file);
if(res && res.length > 0){ //接口成功返回的是数组对象
var _obj = {name:file.name,id:res[0].id};
this.HfileList.push(_obj); //将上传成功数据保存数据 HfileList
_this.$message({
type:'success',
message:'上传成功！'
});
}
},
uploadError(response, file, fileList){
var _this = this;
_this.$message({
type:'warning',
message:'上传文件失败！'
});
//_this.$refs.upload.clearFiles();
},
hideDialog(){
this.editFormVisible = false;
setTimeout(() =>{
this.$refs['editForm'].resetFields();
},100)
this.inputContent = '';
},
//显示dialog模态框
dialogShow:function(title,data){
//debugger;
this.editFormVisible = true;
this.editFormTtile = title;
this.fileList = [];
this.HfileList = [];
if(data.id){
this.reload(data);
}else{
this.editForm ={
id: '',
resName: '',
orderId: '',
intro: '',
content: '',
archiveIds:'',
parent_path:data.parent_path //当前目录路径
}
}
},
reload:function(data){
this.editForm = data;
this.inputContent = data.content; //富文本编辑器赋值
//fileList: [{name: 'food.jpeg', url: ''}, {name: 'food2.jpeg', url: ''}], //默认已上传的文件列表
if(data.archiveIds.length > 0){
conentApi.getUploadInfo(data.archiveIds.join(',')).then(res =>{
if(res && res.length > 0){
for(var i= 0,len = res.length; i<len; i++){
var _name = res[i].resName;
var _url = '/dlapi/cms/archive/download?id='+res[i].id+'&fullPath=';
var _item = {name:_name,url:_url};
var _item2 = {name:_name,id:res[i].id};
this.fileList.push(_item);
this.HfileList.push(_item2);
}
}
}).catch(error =>{
})
}
},
//编辑 or 新增
editSubmit: function () {
var _this = this;
_this.$refs.editForm.validate((valid) => {
if (valid) {
_this.editLoading = true;
_this.btnEditText = '提交中';
if (_this.editForm.id) {
var msg = '编辑成功！';
}else{
var msg = '新增成功！';
}
// console.log(this.HfileList);
var _archiveIds = [];
if(_this.HfileList.length > 0){
for(var i = 0, len = _this.HfileList.length; i < len; i++){
_archiveIds.push(_this.HfileList[i].id);
}
}
if(_archiveIds.length > 0){
_this.editForm.archiveIds = _archiveIds.join(',');
}
//新增
if(!_this.editForm.orderId){
_this.editForm.orderId = '';
}
conentApi.saveArticle(_this.editForm).then((res) => {
_this.editLoading = false;
_this.btnEditText = '提交';
this.$message({
message: msg,
type: 'success'
});
_this.hideDialog();
_this.$bus.$emit('H_conent_refreshTableList',_this.editForm.parent_path);
}).catch(function (error) {
_this.editLoading = false;
_this.$Error(_this,error);
_this.btnEditText = '提交';
});
}
});
}
},
mounted() {
var _this = this;
}
};
</script>
扫一扫
2354
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
