主要功能 (表单自定义效验 && 单独效验某个值)
表单自定义效验export default {
data() {
// 定义效验
const validatePersonCharge = (rule, value, callack) => {
// value 是绑定值的内容
if (value == '张三') {
callack(new Error('不能为张三'))
} else {
callack()
}
}
return {
form: {
name: ''
},
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' },
// 使用
{ validator: validatePersonCharge, trigger: 'blur' }
],
}
}
}
}
单独效验某个值
methods: {
// 下拉框事件
select (e) {
// 点击复选框单独对某个值进行效验 ("selectCharge") 这个是你 prop 绑定的名称
this.$refs["form"].validateField("selectCharge")
}
}
源代码
js
data () {
// 自定义效验
const validatePersonCharge = (rule, value, callack) => {
// value 是 v-model 绑定的值
if (value == '请选择任务负责人') {
// 抛出效验文字
callack(new Error('请选择任务负责人'))
} else {
callack()
}
}
return {
taskRules: {
selectPersonCharge: [
{ required: true, message: '请选择负责人', trigger: 'blur' },
{ validator: validatePersonCharge, trigger: 'blur' }
],
},
taskForm: {
selectPersonCharge: '请选择任务负责人',
personnel: [
{
checked: false,
label: '张小刚'
},
{
checked: false,
label: '李小红'
},
{
checked: false,
label: '王小明'
},
{
checked: false,
label: '周小伟'
},
{
checked: false,
label: '李小刚'
}
]
}
}
}
methods: {
stopDefault (e) {
e.stopPropagation()
let peopleArray = [] this.taskForm.personnel.forEach(item => { if (item.checked) { peopleArray.push(item.label) } })
this.taskForm.selectPersonCharge = peopleArray.join('、')
if (peopleArray.length == 0) { this.taskForm.selectPersonCharge = '请选择任务负责人' }
// 点击复选框单独对某个值进行效验 this.$refs["form"].validateField("selectPersonCharge") },
}
HTML
<el-form-item label="请选择任务负责人:"
prop="selectPersonCharge">
<el-dropdown split-button>
<span>{{taskForm.selectPersonCharge}}</span>
<el-dropdown-menu class="select-person"
slot="dropdown">
<el-dropdown-item v-for="(item, index) in taskForm.personnel"
:key="index"
:command="item.label">
<el-checkbox v-model="item.checked"
@change.native="stopDefault($event)"
:label="item.label"></el-checkbox>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-form-item>
css
// 下拉菜单的宽度
.select-person li {
width: 150px;
}
// 图标
::v-deep .el-dropdown .el-dropdown__caret-button {
padding: 7px 7px 11px 7px;
border-left: 1px solid #dcdfe6;
}
::v-deep .el-dropdown .el-dropdown__caret-button i {
font-size: 20px;
}
标签：selectPersonCharge,vue,checked,自定义,value,label,效验,callack From： https://www.cnblogs.com/wqddmg/p/16881573.html