使用vue-cli和element开发后台系统（三）：常用UI组件

表单

<el-form-item label="存储空间">
<!-- 只允许输入非负小数，小数点后保留两位 -->
<el-input-number v-model="dialogData.userSaveSpace" :min="0" :precision="2"></el-input-number> GB
</el-form-item>
<el-form-item label="序号">
<!-- 只允许输入非负整数 -->
<el-input-number v-model="dialogData.userOrders" :min="0" :precision="0"></el-input-number>
</el-form-item>

precision：小数点位数。设置为0则只能输入整数
min：最小值

输入不合法的值会自动纠正、超过精度会自动四舍五入。
好处：
1 用户体验好，可以输入，可以点按钮。而且输错了会自动纠正
2 开发时不需要写验证了，省事

export default {
data() {
// 重名验证
var nameValidation = (rule, value, callback) => {
// if (!value) {
//     return callback(new Error('不能为空！'));
// }
// if (value.length < 2 || value.length > 20) {
//     return callback(new Error('长度在2-20个字符！'));
// }
var param = {
id: this.dialogData.id,
name: this.dialogData.name
};
this.$axios({
method: 'post',
url: '/api/role/check.htmls',
params: param
}).then((response) => {
const res = response.data;
if (res) {
callback();
} else {
callback(new Error('存在重名！'));
}
}).catch(error => {});
};
return {
// 数据校验
dialogRule1: {
name: [
// 是按数组顺序校验的，所以走到 nameValidation 时肯定已经通过了前面两项校验。
// 为什么不把前面两项校验都放在nameValidation中？因为设置required:true可以出现红色*
{ required: true, message: "不能为空", trigger: "blur" },
{ min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
{ validator: nameValidation, trigger: "blur" },
]
}
};
}
}

如果弹窗中有表单，表单有验证。那么每次打开弹窗后，都需要清除验证。清除的验证包括：
1 之前打开弹窗留下的（之前的数据格式不对，但是点了取消弹窗，那么错误提示都还在）
2 这次打开弹窗时，赋值触发的验证（赋值导致值change了，会触发那些"

触发方式是change的验证

关键点：使用

nextTick

openDial() {
this.loading = true;
this.$axios({
method: 'get',
url: '/api/user/info.htmls',
}).then((response) => {
const res = response.data;
if (res.code == 1) {
// 赋值（会触发"触发方式为chang的验证"）
// ....
// 显示弹窗
this.dialogVisible = true;
// 赋值完成之后，等待dom树更新(等待dialogForm1加载出来)，清除验证
this.$nextTick(() => {
this.$refs.dialogForm1.clearValidate();
});
}
this.loading = false;
}).catch(error => {
this.loading = false;
});
},

表格

1 表格默认排序
慎用

default-sort

A页面中有表格table1，表格上添加了

sort-change

default-sort

弹窗