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事件需要能自定义

这个组件该咋写

阅读 255
评论
    6 个回答

    效果:
    图片描述

    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>