live-telecast-vue3-ui-pc/src/views/parameter/good/cpns/ladder-table.vue

<script setup lang="ts">
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";

const emit = defineEmits(["choose", "delete", "update"]);

defineProps<{
  ladder: Record<string, any>[];
  readonly: boolean;
}>();
</script>

<template>
  <ElTable size="small" border :data="ladder">
    <ElTableColumn prop="name" label="顺序">
      <template #="{ $index }">
        {{ $index + 1 }}
      </template>
    </ElTableColumn>
    <ElTableColumn prop="key" label="类型" />
    <ElTableColumn prop="value" label="类型值" />
    <ElTableColumn v-if="!readonly">
      <template #header>
        <div class="w-full flex justify-between">
          <p>操作</p>

          <ElTooltip content="添加阶梯" placement="top">
            <ElButton
              link
              :icon="useRenderIcon('add')"
              @click="() => emit('choose')"
            />
          </ElTooltip>
        </div>
      </template>

      <template #="{ $index, row }">
        <ElButton
          text
          type="primary"
          size="small"
          @click="() => emit('update', { data: row, index: $index })"
          >编辑</ElButton
        >

        <ElButton
          text
          type="primary"
          size="small"
          @click="() => emit('delete', $index)"
          >删除</ElButton
        >
      </template>
    </ElTableColumn>
  </ElTable>
</template>