accout-vue3-ui/src/views/purchase/purchPay/component/create-payment/order-table.vue

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import { columns } from "../../config/configs";
import { ElTable } from "element-plus";

const props = defineProps<{
  paymentList: Array<Record<string, string>>;
}>();

const emit = defineEmits(["change-payment-detail"]);
const list = ref<Array<Record<string, string>>>([]);
const tableRef = ref<InstanceType<typeof ElTable>>(null);

function handleCurrentChange(value) {
  value && emit("change-payment-detail", value);
}

//过滤审核成功的对账列表
watchEffect(
  () => (list.value = props.paymentList.filter(item => item.status === "3"))
);
</script>

<template>
  <el-table
    border
    ref="tableRef"
    row-key="id"
    :data="list"
    highlight-current-row
    size="small"
    @current-change="handleCurrentChange"
  >
    <el-table-column
      v-for="(col, index) in columns"
      :key="index"
      v-bind="col"
      show-overflow-tooltip
    />
  </el-table>
</template>