要展示多个数据的名称，您可以使用一个循环遍历 arr 数组，并为每个名称创建一个 DOM 元素来展示。以下是修改后的代码示例：
self.uploadImageBtn.addClickHandler(function() {
let importWindow = new utsourceFileUploadNew();
importWindow.on('utsourceContractImportFileUploadNew import success', function(event, data, arr) {
console.log(arr, data);
// 清空旧数据
self.repaymentName.setValue('');
self.flag.setValue('');
self.repaymentPath.setValue('');
self.flag.hide();
if (Array.isArray(arr) && arr.length > 0) {
for (let i = 0; i < arr.length; i++) {
let repaymentName = arr[i].repaymentName;
let str = repaymentName.length > 20 ? repaymentName.substr(0, 20) + '...' : repaymentName;
// 创建展示元素
let linkElement = $('<a>')
.attr('style', 'text-decoration:none')
.attr('title', repaymentName)
.text(str);
let imgElement = $('<img>').attr('src', 'img/clear.png');
let flagElement = $('<div>').append(linkElement).append(imgElement);
// 设置点击事件
imgElement.on('click', function() {
self.repaymentName.setValue('');
self.flag.setValue('');
self.repaymentPath.setValue('');
self.flag.hide();
});
// 将元素添加到页面中
self.flag.append(flagElement);
}
// 显示flag元素
self.flag.show();
}
// 更新字段值
if (data['repaymentName'] != null) {
self.repaymentName.setValue(data['repaymentName']);
self.repaymentPath.setValue(data['repaymentPath']);
}
});
importWindow.show();
});
这样修改后，每个数据的名称都会被创建为一个链接元素，并在 flag 元素中展示出来。点击清除按钮时，将清空相关字段值并隐藏 flag 元素。
请注意，在遍历 arr 数组之前，代码会先清空旧数据，以确保只展示最新的数据。
内容由零声教学AI助手提供，问题来源于学员提问
![make[5]: Entering directory `/home/onvif/gsoap_2.8.116/gsoap-2.8/gsoap/wsdl'
g++ -DWSDL2H_IMPORT_PATH=](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162234068218239.png)
![0 ? data :[{}]":scrol1l="{x:'max-content'}
:pagination="{
pageSize: pageSize,
showSizeChanger: true,
onShowSiz...](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162214216277121.png)
![make[5]: Entering directory `/home/onvif/gsoap_2.8.116/gsoap-2.8/gsoap/wsdl'
g++ -I/usr/lib64/include -DWITH_OPENSSL -DWITH_GZIP -DWSDL2H_IMPORT_PATH=](https://linuxcpp.0voice.com/zb_users/upload/2023/05/202305162217459776743.png)
