<el-dialog title="修改用户信息" :visible.sync="dialogVisixiiugai" width="40%" @close="addDialogClosedxiu">
<el-form ref="addFormRefxg" :model="usernameInfo" :rules="addFormRules" label-width="70px">
<el-form-item label="用户名">
<el-input v-model="usernameInfo.username" disabled></el-input>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" @click="editUserInfo">确 定</el-button>
</span>
</el-dialog>
1.:visible.sync：控制显示和隐藏
2.@close：el-input会有历史记录，调用ref的resetFields来清除
addDialogClosedxiu() {
this.$refs.addFormRefxg.resetFields()
},
3.验证规则
addFormRules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 10, message: "用户名长度在 3 到 10个字符", trigger: "blur" },
],}
:model绑定的是表单数据的对象， :rules绑定的是验证规则对象，v-model绑定的是数据
prop绑定的是规则对象的哪一条规则
问题：规则的username一定要跟addForm对象 的username一致，在哪一个变量使用，变量名就跟规则名一样
不然会出错，且出错的验证规则一直被触发
3.对整个表单预验证，通过valid值为true，否则为false
editUserInfo() {
this.$refs.addFormRefxg.validate(valid => {
if (!valid) return //假如不通过，就返回去
})
},
// validate是表单的验证属性
1.状态管理开关
scope是所有行的对象里面有属性，row代表是当前的行，mg_state代表当前的prop的属性值
2.表单
:model绑定的是表单数据的对象， :rules绑定的是验证规则对象，v-model绑定的是数据
prop绑定的是规则对象的哪一条规则
//添加用户的表单数据
addForm: {
username: ''
},
//添加表单验证规则对象
addFormRules: {
username: [
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 10, message: "用户名长度在 3 到 10个字符", trigger: "blur" },
]
}
问题：规则的username一定要跟addForm对象 的username一致，在哪一个变量使用，变量名就跟规则名一样
不然会出错，且出错的验证规则一直被触发
3.对整个表单预验证，通过valid值为true，否则为false
editUserInfo() {
this.$refs.addFormRefxg.validate(valid => {
if (!valid) return //假如不通过，就返回去
})
},
// validate是表单的验证属性
4.按钮
使用了表格组件后可设置template模板，这样可以通过scope.row拿到每一行数据
5.给整个页面添加强制宽度，这样当宽度小的时候布局不会乱
#app{
min-width: 1366px;
}
6.删除后页面要重新加载数据只要给原有的数据赋值就可以，不要重新网络请求，这样会关闭了原来的东西
<el-cascader
v-model="Classification"
:options="ProductData"
:props="Productprops"
@change="handleChange"
// v-model：[] 用户选择后的数据保存在这里，一个数组
options：[] 给用户选择的数据,一个数组
props：//指定级联选择器的配置对象
// Productprops: {
// value: "cat_id", //具体选择哪一个值的属性
// label: "cat_name", //你所看到的是哪一个属性
// children: "children", //父子嵌套用的是哪一个属性
// expandTrigger: "hover", //鼠标移动显示下一级
// },
@change 用户选择的时候会触发该 @change的函数
\
