kd-aiot-frontend/src/views/system/user/components/role-select.vue

<!-- 角色选择下拉框 -->
<template>
  <el-select
    multiple
    clearable
    :value="value"
    class="ele-block"
    :placeholder="placeholder"
    @input="updateValue"
    filterable
  >
    <el-option
      v-for="item in data"
      :key="item.id"
      :value="item.id"
      :label="item.name"
    />
  </el-select>
</template>

<script>
  import { getlistRole } from '@/api/system/role';

  export default {
    props: {
      // 选中的数据(v-modal)
      value: Array,
      // 提示信息
      placeholder: {
        type: String,
        default: '请选择角色'
      }
    },
    data() {
      return {
        data: []
      };
    },
    created() {
      /* 获取角色数据 */
      getlistRole()
        .then((res) => {
          this.data = res;
        })
        .catch((e) => {
          // this.$message.error(e.message);
        });
    },
    methods: {
      updateValue(value) {
        this.$emit('input', value);
      }
    }
  };
</script>