uniapp根据索引获取后台数组对应数据实现多选

本文主要讲述显示uniapp的uni-table表格的多选操作

1、vue页面代码

selection-change

开启多选时，当选择项发生变化时会触发该事件

<uni-table ref="table" :loading="loading" border stripe type="selection"
emptyText="暂无更多数据" @selection-change="selectionChange">
<uni-tr>
//和html一样th也就是表头
<uni-th align="center">日期</uni-th>
</uni-tr>
//tr就是表数据，databianhao就是后台给我的显示数据
<uni-tr  v-for="(item, index) in databianhao" :key="item">
<uni-td align="center" class="textbianhao">{{ item.sn }}</uni-td></uni-tr>
</uni-table>

 2、js代码如下，当选择当行数据触发selection-change事件，e.detail.index是选择的索引，格式如下，databianhao定义在data中，是个数组，是后台反的数据，当选中后把当前选择的当前行的数据赋值给arrlist，如果只想要当前行数据的某一数据，如下再次定义数组sn，把item中的某一项提取出来并且赋值

selectionChange(e) {
				console.log(e, '0000000000000000000000000000000000000')
				var indexArr = e.detail.index//[index]
				console.log(indexArr);
				var arrlist = []
				// 把选中的当前行数据遍历放在数组中
				indexArr.forEach(item => {
					arrlist.push(this.databianhao[item])
				})
				// this.databianhao[index]
				var sn=[]
				arrlist.forEach((item)=>{
					 sn.push(item.sn)
				})
				this.ruleForm=sn.join(",")
				  console.log(this.ruleForm,'单选')
				
			},

结果this.ruleForm如下15010000021,15010000020,数据是当前行数据的某一项，并且是以字符串的形式

希望对你有所帮助~