elementui使用中遇到问题"/>
elementui使用中遇到问题
- vue项目elementUI中el-tree组件修改图标的方法
- vue项目elementui中uploade
- 文件未上传之前，在el-input显示上传文件名称，上传成功后，删除上传文件名称；
- 上传的文件附带其他数据，当文件未改变时，附加数据单独上传
- elementui中的el-form组件
- elementui中的el-form的重置resetFields()不起作用
- elementui中el-checkout组件
- elementui中el-checkbox选中id值，进行前后端交互
- elementui中el-table
- el-table循环动态渲染数据，格式化时间列数据
vue项目elementUI中el-tree组件修改图标的方法
.el-tree-node__content{height: 35px;margin: 10px 0px;.el-tree-node__expand-icon {padding: 0px;margin-right: 20px;width: 30px;height: 30px;content: url("../../../commons/images/sign-check-icon.png");}.el-tree-node__expand-icon.expanded{transform: rotate(0deg);}
}vue项目elementui中uploade
文件未上传之前，在el-input显示上传文件名称，上传成功后，删除上传文件名称；
//上传内容一旦改变就执行该函数:on-change="loginPictureCardPreview"
loginPictureCardPreview(loginlogofileList) {if(!loginlogofileList.response){//请求未成功，返回值为空//将上传图片文件的名称和图片显示指定位置this.loginImageUrl = loginlogofileList.url;this.loginlogoimgname = loginlogofileList.name;}else{//保存之后清除上传文件的名字//请求成功，返回值返回this.loginlogoimgname = ''}
},上传的文件附带其他数据，当文件未改变时，附加数据单独上传
- elementui中的uploader组件，点击上传的文件没有更改时，上传请求时不能发送的，但是此时我们可能仍需要上传其他的附带数据，所以可以根据文件上传时在el-input框显示的文件名里区分；
/*登录页logo部分，点击保存按钮执行loginlogosubmitUpload*/
loginlogosubmitUpload() {//将上传的附带信息显示先清空this.loginsysname = '';//根据上传的文件名称是否在input表格中显示来做个判断if(this.loginlogoimgname){console.log('系统logo图片名称不为空');//将需要上传的附带信息设置好this.loginLogoSysName.loginLogoSysName = this.loginpreviewsysname;//此时走正常的上传请求this.$refs.loginlogoupload.submit();}else{console.log('系统名称为空');//走一个新的请求，依然是一样的接口，但是请求方式更改了this.$http('get', '/api/****/****/****', {queryParams : {loginLogoSysName:this.loginpreviewsysname}}).then((res) => {if (res.statusCode === 200) {this.isLoginButtonDisabled = true;}}).catch((e) => {this.isLoginButtonDisabled = true;});this.isLoginButtonDisabled = true;}
}elementui中的el-form组件
elementui中的el-form的重置resetFields()不起作用
<el-form ref="passwordConfig" :model="passwordConfig" label-width="80px"><el-form-item label="登录密码强度要求" prop="passwordStrength"><el-checkbox-group v-model="passwordConfig.passwordStrength"><el-checkbox label="小写字母" name="type" disabled></el-checkbox><el-checkbox label="大写字母" name="type"></el-checkbox><el-checkbox label="数字" name="type" disabled></el-checkbox><el-checkbox label="特殊字符" name="type"></el-checkbox></el-checkbox-group></el-form-item><div style="text-align: right"><el-button type="primary" @click="submitPasswordConfigForm">保 存</el-button><el-button @click="resetPasswordConfigForm('passwordConfig')">取 消</el-button></div>
</el-form>//script部分
/*重置按钮*/
resetPasswordConfigForm(form){console.log(1,1,1)this.$refs[form].resetFields();
},- 其他没错，但是就是不起效果，‘1,1,1’可以输出来，但是就是重置不能使用；
- 官网上说：resetFields 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果；
- 后来发现，是每个el-form-item属性中没有加 prop=”xxx”，添加上就可以重置了；
elementui中el-checkout组件
elementui中el-checkbox选中id值，进行前后端交互
//html部分
<el-form-item label="登录密码强度要求" prop="passwordStrength"><el-checkbox-group v-model="passwordConfig.passwordStrength"><el-checkboxv-for="item in passwordStrengths":label="item.id" //注意，此时label绑定的是id值，而使用{{item.name}}进行显示值name="type":disabled="item.disableddata">{{item.name}}</el-checkbox></el-checkbox-group>
</el-form-item>//script部分
data：passwordConfig:{passwordStrength: [1,3], //密码强度 }, //默认选中 passwordStrengths:[ //全部选项列表{id: 1,name: '小写字母',disableddata: true},{id: 2,name: '大写字母',disableddata: false},{id: 3,name: '数字',disableddata: true},{id: 4,name: '特殊字符',disableddata: false},]elementui中el-table
- el-table中根据返回数据的不同，显示不同文字颜色：
//html部分
<el-tableborderstripe:data="equmanaTabeldata"ref="multipleTable"tooltip-effect="dark"@selection-change="handleSelectionChange"style="width: 100%"><el-table-column prop="cpuUtilization" label="CPU利用率" width="180"><template slot-scope="scope"><spanstyle="margin-left: 10px"v-bind:class="{successfont: (scope.row.cpuUtilizationflag === 0),alarmfont: (scope.row.cpuUtilizationflag === 1), errorfont: (scope.row.cpuUtilizationflag === 2)}">{{scope.row.cpuUtilization }}</span></template></el-table-column>
<el-table>//data部分
equmanaTabeldata: [{id:'4444', //当前设备的idcpuUtilization:'6', //CPU利用率cpuUtilizationflag: 2, //CPU利用率状态标识，0是成功，1是警告，2是失败//memUtilization:'7', //内存利用率//memUtilizationflag: 0, //内存利用率状态标识//diskUtilizationflag: 1, //磁盘利用率状态标识//diskUtilization:'8', //磁盘利用率}],//css部分
.successfont{color: red;
}
.errorfont {color: springgreen;
}
.alarmfont{color: yellow;
}el-table循环动态渲染数据，格式化时间列数据
- thead和tbody都是数组，thead是动态渲染的；
- 根据thead的type值，如果是DATE那么就将其进行时间格式化。
// vue部分
<el-table
ref="multipleTable"
:data="drillDownTable"bordertooltip-effect="dark"style="width: 3440px"><el-table-column
:key="item.key"v-for="item in formThead":label="item.label":prop="item.label":column-key="item.key"><template slot-scope="scope"><div class="table-text-wrap"><p class="table-text-p-wrap" :title="item.type | filterFormat(scope.row[item.key].label)" v-if="scope.row[item.key]">{{item.type | filterFormat(scope.row[item.key].label)}}</p></div></template></el-table-column>
</el-table>- 将过长的内容进行文本省略
// css部分
.el-table {max-width: none;
}
.table-text-wrap{overflow: hidden;width: 100%;.table-text-p-wrap{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
}- 使用filters，根据type进行数据格式化
// js部分
filters: {// 下钻数据格式filterFormat (type, value) {if (type == "DATE") {return utils.formatDate(value)}else {return value}}
},- 以下是模拟的数据
// 模拟数据
"data":{"thead":[{"label":"域名","type":"STRING","key":"host"},{"label":"日志编码","type":"STRING","key":"id"},{"label":"生成时间","type":"DATE","key":"create_time"},{"label":"采集时间","type":"DATE","key":"collect_time"}],"tbody":[{"host":{"label":"10.16.66.7","value":"10.16.66.7"},"id":{"label":"f9e5484763434055bad28aa744c22344","value":"9d26456546yc2881267962e274a5f7"},"create_time":{"label":1532105850229,"value":1532105850229},"collect_time":{"label":1532105868058,"value":1532105868058}},{"host":{"label":"10.16.66.7","value":"10.16.66.7"},"id":{"label":"9d2586a5832c4c2881267962e274a5f7","value":"9d2586a5832c4c2881267962e274a5f7"},"create_time":{"label":1532105850232,"value":1532105850232},"collect_time":{"label":1532105868060,"value":1532105868060}},{"host":{"label":"10.16.66.7","value":"10.16.66.7"},"id":{"label":"c716d173e8984396968d09679b5032d6","value":"c716d173e8984396968d09679b5032d6"},"create_time":{"label":1532105850231,"value":1532105850231}}]
}- utilter中的时间格式化
import moment from 'moment';
// 时间戳转时间
function formatDate (item) {let str = ''if (item) {item = parseInt(item)str = moment(item).format('YYYY-MM-DD HH:mm:ss')}return str
}
exports.formatDate = formatDate更多推荐
elementui使用中遇到问题
发布评论