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

这个组件该咋写

阅读 276
评论
    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>
    

      把按钮封装成组件,权限通过props传进来,根据权限过滤出要显示的按钮。按钮的点击事件通过emit触发父组件事件,父组件再执行对应的自定义方法

        • 268

        那就传个数组控制按钮组里按钮展示,click事件中emit返回父组件实现

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

            <component :is="'el-button'" v-bind="props">按钮名称</component>

              • -2
              • 新人请关照

              <component :is="'el-button'" v-bind="props">按钮名称</component>

                撰写回答

                登录后参与交流、获取后续更新提醒