(精华)2020年8月1日 vue vue-treeselect树形选择器的使用

npm install --save @riophae/vue-treeselect

<template>
  <el-dialog title="添加表单" :visible.sync="visible">
    <el-form
      ref="form"
      :rules="rules"
      :model="entity"
      label-position="left"
      label-width="70px"
      style="width: 300px; margin-left: 50px;"
    >
      <el-form-item label="用户名" prop="UserName">
        <el-input v-model="entity.UserName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码" prop="newPwd">
        <el-input v-model="entity.newPwd" type="password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名" prop="RealName">
        <el-input v-model="entity.RealName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="性别" prop="Sex">
        <el-radio-group v-model="entity.Sex">
          <el-radio :value="0">女</el-radio>
          <el-radio :value="1">男</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="生日" prop="Birthday">
        <el-date-picker v-model="entity.Birthday" format="yyyy-MM-DD" />
      </el-form-item>
      <el-form-item label="部门" prop="DepartmentId">
        <treeselect
          v-model="entity.DepartmentId"
          :multiple="true"
          :options="DepartmentIdTreeData"
          :show-count="true"
          placeholder="请选择部门"
          :normalizer="normalizer"
        />
      </el-form-item>
      <el-form-item label="角色" prop="RoleIdList">
        <el-select v-model="entity.RoleIdList" allowClear mode="multiple">
          <el-option v-for="item in RoleOptionList" :key="item.Id">{{
            item.RoleName
          }}</el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">
        取消
      </el-button>
      <el-button type="primary" @click="handleSubmit">
        确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import moment from 'moment'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { GetDataList } from '@/api/role'
import { GetTreeDataList } from '@/api/department'
import { GetTheData, SaveData } from '@/api/user'
export default {
  components: { Treeselect },
  props: {
    afterSubmit: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      visible: false,
      entity: {},
      DepartmentIdTreeData: [],
      RoleOptionList: [],
      rules: {
        UserName: [{ required: true, message: '必填' }],
        RealName: [{ required: true, message: '必填' }],
        Sex: [{ required: true, message: '必填' }]
      }
    }
  },
  methods: {
    /**
     * 初始化表单数据
     */
    init() {
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      GetTreeDataList({}).then(resJson => {
        if (resJson.Success) {
          this.DepartmentIdTreeData = resJson.Data
        }
      })
      GetDataList({}).then(resJson => {
        if (resJson.Success) {
          this.RoleOptionList = resJson.Data
        }
      })
    },
    openForm(id) {
      this.init()
      if (id) {
        GetTheData({ id: id }).then(
          resJson => {
            console.log(resJson)
            this.entity = resJson.Data
            if (this.entity['Birthday']) {
              this.entity['Birthday'] = moment(this.entity['Birthday'])
            }
          }
        )
      }
    },
    handleSubmit() {
      this.$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        SaveData(this.entity).then(
          resJson => {
            if (resJson.Success) {
              this.$message.success('操作成功!')
              this.afterSubmit()
              this.visible = false
            } else {
              this.$message.error(resJson.Msg)
            }
          }
        )
      })
    },
    // 后台返回的数据和VueTreeselect要求的数据结构不同，需要进行转换
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.Id,
        label: node.Text,
        children: node.Children
      }
    }
  }
}
</script>