accout-vue3-ui/src/views/purchase/purchPay/component/create-payment/add-order-modal.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 visible = ref(false);

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"))
);

defineExpose({
  onDisplay: () => (visible.value = true)
});
</script>

<template>
  <el-dialog v-model="visible" title="订单对账" center>
    <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>
  </el-dialog>
</template>