caimei-authentic-manager/src/views/admin/settings/roles/edit.vue

<template>
  <div class="app-container roles-edit">
    <el-form label-width="100px">
      <el-form-item label="角色名称：">
        <el-input placeholder="角色名称" />
      </el-form-item>
      <el-form-item label="角色描述：">
        <el-input placeholder="角色描述" />
      </el-form-item>
      <el-form-item label="角色授权：">
        <el-tree
          ref="tree"
          :data="data"
          show-checkbox
          default-expand-all
          node-key="id"
          highlight-current
          :props="defaultProps"
        />
      </el-form-item>
      <el-form-item>
        <!-- 确认 取消 -->
        <div class="control-box">
          <el-button type="primary">保存</el-button>
          <el-button type="info">重置</el-button>
          <el-button type="warning">返回</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [{
        id: 1,
        label: '一级 1',
        children: [{
          id: 4,
          label: '二级 1-1',
          children: [{
            id: 9,
            label: '三级 1-1-1'
          }, {
            id: 10,
            label: '三级 1-1-2'
          }]
        }]
      }, {
        id: 2,
        label: '一级 2',
        children: [{
          id: 5,
          label: '二级 2-1'
        }, {
          id: 6,
          label: '二级 2-2'
        }]
      }, {
        id: 3,
        label: '一级 3',
        children: [{
          id: 7,
          label: '二级 3-1'
        }, {
          id: 8,
          label: '二级 3-2'
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  methods: {
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes())
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys())
    },
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([{
        id: 5,
        label: '二级 2-1'
      }, {
        id: 9,
        label: '三级 1-1-1'
      }])
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3])
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([])
    }
  }
}
</script>

<style scoped lang="scss">
.roles-edit {
  width: 600px;
  margin: 0 auto;
  margin-top: 40px;
}
.control-box {
  margin: 20px 0;
  text-align: center;
  .el-button {
    width: 120px;
    margin: 0 8px;
  }
}
</style>