0

基于element-ui

页面上有个按钮组

`<el-button-group>

<el-button>按钮A</el-button>
<el-button>按钮B</el-button>
<el-button>按钮C</el-button>
…

</el-button-group>`

因为很多页面复用,现在想把它定义成组件,现在问题是

我有一张权限验证表,希望根据用户该页权限,动态生成按钮组中内容,且按钮组中的按钮click事件需要能自定义

这个组件该咋写

末子 32
12月3日提问

查看全部 6 个回答

0

父组件

<my-button-group
  :authority="['管理员']"
  @on-open="aaa"
  @on-close="bbb"
  @on-confirm="ccc"
/>

子组件

<template>
  <div>
    <button v-if="canUse('管理员')" @click="$emit('on-open')">打开</button>
    <button v-if="canUse('所有人')" @click="$emit('on-close')">关闭</button>
    <button v-if="canUse('普通员工')" @click="$emit('on-confirm')">确定</button>
  </div>
</template>

<script>
export default {
  name: 'my-button-group',
  props: {
    authority: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  methods: {
    canUse (key) {
      if(!this.authority.length) {
        return true
      } else {
        return this.authority.some(c => c===key)
      }
    }
  }
}
</script>

推荐答案

0

已采纳

效果:
图片描述

Button Group

<template>
  <div>
    <el-button-group>
      <span v-for="btn in btnGroupContent"
        :key="btn.lebal">
        <el-button
          v-if="authority.actions.includes(btn.action)"
          @click="handleClick(btn.action)"
        >
            {{btn.lebal}}
        </el-button>
      </span>
    </el-button-group>
  </div>
</template>

<script>
export default {
  data () {
    return {
      btnGroupContent: [
        {
          lebal: 'Create',
          action: 'create'
        },
        {
          lebal: 'Update',
          action: 'update'
        },
        {
          lebal: 'Delete',
          action: 'delete'
        }
      ]
    }
  },
  methods: {
    handleClick (action) {
      // console.log('action', action)
      this.$emit(action, this.authority)
    }
  },
  props: {
    authority: {
      type: Object,
      default: function () {
        return {
          // name: 'admin',
          // actions: [
          //   'create',
          //   'update'
          // ]
        }
      }
    }
  }
}
</script>

Main

<template>
  <div class="content">
    Admin:
    <pri-btn-group
      :authority="admin"
      @create="handleCreate"
      @update="handleUpdate"
      @delete="handleDelete"
    />
    Editor:
    <pri-btn-group
      :authority="editor"
      @create="handleCreate"
      @update="handleUpdate"
    />
  </div>
</template>

<script>
import priBtnGroup from './utils/PriBtnGrp.vue'
export default {
  components: {
    priBtnGroup
    // rankings
  },
  data () {
    return {
      // showRanking: false
      admin:
        {
          id: 0,
          name: 'admin',
          actions: [
            'create',
            'update',
            'delete'
          ]
        },
      editor:
        {
          id: 1,
          name: 'editor',
          actions: [
            'create',
            'update'
          ]
        }
    }
  },
  created () {

  },
  methods: {
    handleCreate (user) {
      console.log(user)
      this.$message(user.name + ' clicked create button')
    },
    handleUpdate (user) {
      this.$message(user.name + ' clicked update button')
    },
    handleDelete (user) {
      this.$message(user.name + ' clicked delete button')
    }
  }
}
</script>

推广链接