前端添加新数据后，默认选中该条新数据

技术栈：Vue3.2 + TS + ArcoDesign

1.今天做了一个很有意思的小需求，大体内容如下:

目前有一个列表，我可以对这个列表进行一个新增操作，在数据新增过后，需要默认选中你新增加的那条数据。

2.大体思路：

1. 新增数据是在一个弹窗中，在新加数据成功之后，需要刷新列表，此时需要绑定emit事件，告诉父组件，新增成功，并且需要父组件执行一个默认选中的操作

2. 这个需要看一下业务：

1.假如新增的数据是后端经过排序了，默认是第一个，那么可以按照第一个方法进行操作
2.假如这个顺序没有经过排序，就需要后端把你添加的数据的id返回给你，再去执行第一个操作

3.实现代码

父组件的表格和子组件

<a-table
  row-key="id"
  :scroll="scroll"
  :columns="columns"
  :selected-keys="selectKey"
  :pagination="false"
  :data="caseData"
  :row-selection="rowSelection"
  @select="selectCase"
/>
<AddCase ref="AddCaseRef" @refresh="refresh" />

子组件

其余代码就省略了，在数据新增成功的时候，触发一个emit事件
const emit = defineEmits<{
  (e:'refresh'):void
}>()
emit('refresh')

父组件的script事件

const caseData = ref([]); //这里表格数据
const selectKey = ref([]) // 单选数据的key
const radioChoose = ref([]); // 单选数据的对象值
const selectCase = (val) => {
  selectKey.value = val
  radioChoose.value = [];
  caseData.value.forEach((item) => {
    if (item.id === val[0]) {
      radioChoose.value.push(item);
    }
  });
};

  // 在新建案件之后，默认选中该案件
  const defaultChecked = () => {
    selectKey.value = [caseData.value[0].id] //这里是后端排序了，新增案件默认为第一个
    radioChoose.value.push(caseData.value[0])//并且把第一条数据添加进去
  }

  const refresh = async () => {
    await intaData(true);
    defaultChecked()
  };
    const intaData = async (flag = false) => {
    if (flag) {
      params.currentPage = 1
    }
    const { data: res } = await Api.send(ApiConfig.CASELIST, params);
    if (res.status === 0) {
      caseData.value = res.data.content;
      params.total = res.data.totalElements;
    }
  };