vue项目 下拉多选树treeselect非空验证

 多选

目录

 多选

 单选：

---

 

<el-row>
   <el-col :span="24">
        //注意  prop和v-model缺一不可
        //prop="deptIds"单向绑定
       <el-form-item label="所属部门" prop="deptId">
          <treeselect
              v-model="form.deptId"   //双向绑定
              :multiple="true"   //多选
              :options="deptOptions"   //下拉展示的数据源
              @select="ADDselectMember"  //选中触发的函数
              @deselect="DELselectMember" //取消选中触发的函数
              @input="changedetId" 
              placeholder="选择上级部门"/>
        </el-form-item>
   </el-col>
</el-row>



export default {
  name: "Team",
  dicts: ['sys_normal_disable'],
  components: { Treeselect },
  data() {
    return {
  
      deptId:[],
      // 表单参数
      form: {
      },
      // 表单校验
      rules: {
       
        deptId: [
          { required: true ,message: "部门名称不能为空", trigger: "input" }
        ],
      }
    };
  },

 methods: {
    ADDselectMember(node,instanceId){
      // console.log("啊啊大大1"+this.form.deptIds)
      console.log("名字"+node.label)
      console.log("id"+node.id)
      this.deptId.push(node.id)
      this.form.deptId = this.deptId
      console.log("新增"+this.deptId)
      // console.log("啊啊大大"+this.form.deptId)

      // console.log("啊啊大大3"+val)
    },
    DELselectMember(node,instanceId){
      for (let i=0; i<this.deptId.length; i++){
        if (this.deptId[i] === node.id){
          this.deptId.splice(i, 1)
          if (this.deptId.length <=1){
            this.form.deptId = this.deptId[0]
          }
          this.form.deptId = this.deptId
          console.log("删除"+this.deptId)

        }
      }
      // this.deptId.pop(node.id)
      // console.log("删除"+this.form.deptIds)
      console.log("删除"+this.deptId)
      // console.log("啊啊大大33"+val)
    },
  }


}

 单选：

 <el-row>
          <el-col :span="24">
            <el-form-item label="所属部门" >
              <treeselect
                    :disabled="viewOrEdit"
                    v-model="form.deptIds"
                    @focus="dis"
                    :multiple="false"
                    :options="deptOptions"
                    @select="ADDselectMember"
                    @input="changedetId"
                    placeholder="请选择部门"/>
            </el-form-item>
          </el-col>
        </el-row>





changedetId(){
      this.$nextTick(()=>{
        this.$refs.form.validateField('deptIds')
      })
    },