vben-Table-updateTableDataRecord（）的使用（第一次发布试试效果）

vben官网：Table 表格 | Vben Admin

1.updateTableDataRecord

类型： (rowKey: string | number, record: Recordable) => Recordable | void

说明： 根据唯一的 rowKey 更新指定行的数据.可用于不刷新整个表格而局部更新数据

 

场景：对列表一行数据的某一个字段进行赋值。

 <BasicTable @register="registerTable" >
      <template #action="{ record }">
        <TableAction
          :actions="[
             {
              label: '查询金额',
              color: 'success',
              onClick: queryMoney.bind(null, record),
              
            },
          ]"
        />
      </template>
    </BasicTable>

const [registerTable, { reload , updateTableDataRecord }] = useTable({
        title: '业务进度',
        showIndexColumn: false,
        api: getprogresslist,
        size: 'small',
        columns: columns,
        bordered: true,
        useSearchForm: true, //开启搜索区域
        formConfig: formConfig, //搜索区域定义
        rowSelection: false,
        pagination: { pageSize: 10 }, //每页显示数据条数
        showTableSetting: true, //是否显示表格设置工具
        tableSetting: { fullScreen: true }, //表格设置工具是否显示全屏按钮
        actionColumn: {
          width: 200,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });

  const queryMoney = (record) => {
        console.log(record.rowId,'record')
        const queryData = {}
        
        queryData.applyno = record.applyno;
//接口
        getWebServices(queryData).then((res) => {
//将返回值和原列表数据合并，更新当前所选的一行数据
          updateTableDataRecord(record.rowId, Object.assign(record, { surveyMax: res.busSurveyResult.surveyMax }) )
          console.log(Object.assign(record, { surveyMax: res.busSurveyResult.surveyMax }) ,res.busSurveyResult.surveyMax ,'121212')
        })
      };

列表字段（主要对最高借款金额进行操作）

 const columns: BasicColumn[] = [
    {
      title: '客户姓名',
      dataIndex: 'cliname',
      width: 100,
    },
    {
      title: '证件号码',
      dataIndex: 'certno',
      width: 160,
    },
    {
      title: '申请金额（元）',
      dataIndex: 'appSum',
      width: 100,
      customRender: ({ text }) => {
        return text ? formatMoney(text) : '--';
      },
    },
    {
      title: '申请日期',
      dataIndex: 'occurdate',
      width: 100,
    },
    {
      title: '业务品种',
      dataIndex: 'prdtNo',
      customRender: ({ text,record }) => {
        return '['+record.prdtNo+']'+record.prdtName
      },
    },
    {
      title: '申请号',
      dataIndex: 'applyno',
      width: 160,
    },
    {
      title: '最高借款金额',
      dataIndex: 'surveyMax',
      customRender: ({ text, record }) => {
        return text ? text: '******';;
      },
      width: 160,
    },
  ];

图片：

点击查询金额后，将查询到的值，展示到当前列表的对应的字段上。