常用elementui组件

下拉选择器

<el-select v-model="form.professional">
    <el-option v-for="item in professionals" :label="item.id" :value="item.name" :key="item.id"></el-option>
</el-select>

级联菜单

<el-cascader v-model="collegeAndSpeciality" :props="cascaderProps"
                       :options="options" @change="handleChange" style="width: 100%"></el-cascader>

  cascaderProps: {
        value: 'id',
        label: 'name',
        children: 'children',
      },

用户状态

<el-switch v-model="scope.row.disable" active-color="red" @change="disableStudent(scope.row)"></el-switch>

disableStudent(row) {
      let obj = Object.assign({}, row)
      obj.disable = !!obj.disable
      this.updateStudent(obj)
    },

树状菜单

 <el-tree
            default-expand-all
            :props="{label:'name',value:'id'}"
            :data="treeData"
            show-checkbox
            node-key="id"
            ref="menuTreeRef"
            :render-after-expand="true"
        />

树状菜单授权

const setRoleMenu = () => {
  let checkedKeys = menuTreeRef.value.getCheckedKeys();
  let halfCheckedKeys = menuTreeRef.value.getHalfCheckedKeys();
  checkedKeys.unshift.apply(checkedKeys,halfCheckedKeys)
 request.post("role/roleMenu/"+state.form.id,checkedKeys).then(res=>{
   if(res.code === '200'){
     ElMessage.success("授权成功")
     permissionPopup.value = false
     load()
   }else {
     ElMessage.error(res.msg)
   }
 })
}

树状菜单回显

const handleEmpower = (row) => {
  permissionPopup.value = true
  nextTick(()=>{
    state.form.id = row.id
    request.get("role/roleMenu/"+row.id).then(res=>{
      if(res.code === '200'){
        if(menuList){
          menuTreeRef.value.setCheckedKeys([])
        }
        menuList.value = res.data
        menuList.value.forEach(v =>{
          menuTreeRef.value.setChecked(v,true,false)
        })
      }else{
        ElMessage.error(res.msg)
      }
    })
  })
}