vue中组件内容如何根据js编程创建

基于element-ui

页面上有个按钮组

`<el-button-group>

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

</el-button-group>`

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

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

这个组件该咋写

阅读 277
评论
    6 个回答
    • 2.8k

    父组件

    <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>