vue3获取插槽slot中有权限的按钮元素

接上一章实现按钮权限，在表格操作列中按钮绑定权限后，表格操作列需要根据显示的按钮个数动态改变宽度，因此需要获取操作列插槽中有权限的按钮

1.插槽内容

<template #td_operate="scope">
  <div class="operate_icon_group">
    <el-icon
      class="operate_icon_item"
      size="16px"
      @click="showDialog(scope.row)"
      :title="$t(`table.edit`)"
      v-permission="['edit']"
      ><Edit
    /></el-icon>
    <el-icon
      class="operate_icon_item delete"
      size="16px"
      @click="handleDelete(scope.row)"
      :title="$t(`table.delete`)"
      v-permission="['delete']"
      ><Delete
    /></el-icon>
  </div>
</template>

2.插槽使用

<el-table-column
  v-if="operationFlag&&operatePermBtn.length>0"
  :fixed="operatefixed ? 'right' : ''"
  :label="
    $t(`table.operate`)[0].toUpperCase() + $t(`table.operate`).slice(1)
  "
  :align="operateAlign"
  :width="operateItemWidth!='0'?operatePermWidth:operateWidth"
>
  <template #default="scope">
    <slot name="td_operate" :row="scope.row"></slot>
  </template>
</el-table-column>

3.判断操作列插槽中有权限的按钮

const props = defineProps({
  operateItemWidth: {
    // 操作列每个按钮的宽度
    type: String,
    default: '0'
  },
})
    
const opeSlots = useSlots()
let operatePermBtn = ref([])
let operatePermWidth = ref('')
const permissions = sessionStorage.getItem('Permissions')
if (opeSlots && opeSlots.td_operate) {
  opeSlots.td_operate().forEach((vn) => {
    const { children } = vn
    if(children&&children.length>0){
      for (let i = 0; i < children.length; i++) {
        const item = children[i];
        const { dirs } = item
        if(dirs&&dirs.length>0){
          // 操作列按钮只绑定一个自定义指令，取dirs第一个元素就行
          const bindVal = JSON.parse(sessionStorage.getItem('MenuItem')).Name+':'+dirs[0].value
          if (permissions&&permissions.indexOf(bindVal) > -1) {
            operatePermBtn.value.push(item)
          }
        }else{
          operatePermBtn.value.push(item)
        }
      }
    }
  })
  operatePermWidth.value = operatePermBtn.value.length * Number(props.operateItemWidth)
  operatePermWidth.value = operatePermWidth.value < 60 ? 60 : operatePermWidth.value // 设置操作列最小宽度为60
}

4.动态改变操作列的显示隐藏和宽度

<el-table-column
  v-if="operationFlag&&operatePermBtn.length>0"
  :fixed="operatefixed ? 'right' : ''"
  :label="
    $t(`table.operate`)[0].toUpperCase() + $t(`table.operate`).slice(1)
  "
  :align="operateAlign"
  :width="operatePermWidth"
>
  <template #default="scope">
    <slot name="td_operate" :row="scope.row"></slot>
  </template>
</el-table-column>