user/components/singleSelect.vue

<template>
	<view class="container">
		<view class="d-table">
			<view class="d-tr">
				<view class="d-th">第三方SDK</view>
				<view class="d-th">使用场景描述</view>
				<view class="d-th">共享的个人信息类型</view>
			</view>
			<!-- 为了提高dom渲染效率，当list产生破坏性变动时（如删除其中一项，或者排序等）必须使用唯一确定的key，而不能使用index -->
			<view class="d-tr" :class="{ active: currentRowIndex === i }" v-for="(item, i) in list" :key="item.id"
				@click="handleCurrentChange(item, i)">
				<view class="d-td">{{ item.name }}</view>
				<view class="d-td">{{ item.desc }}</view>
				<view class="d-td">{{ item.info }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'singleSelect',
		data() {
			return {
				list: [{
						name: '友盟',
						desc: '用于数据统计及分析，微信分录、分享',
						info: '软件使用和点击记录、唯一设备识别码、设备MAC地址、IP地址',
						id: 1
					},
					{
						name: '高德地图',
						desc: '地理定位，获取位置信息',
						info: '个人位置信息',
						id: 2
					},
					{
						name: 'Bugly',
						desc: '用于崩溃日志收集',
						info: '崩溃日志、唯一设备识别码',
						id: 3
					}
				],
				currentRowIndex: '',
				currentRow: ''
			};
		},
		methods: {
			handleCurrentChange(item, i) {
				this.currentRowIndex = i;
				this.currentRow = item;
			}
		}
	};
</script>

<style lang="scss">
	.container {
		margin: 24rpx 0;
	}

	.d-tr.active {
		// background-color: rgba($color: #ecf5ff, $alpha: 1);
		// color: #606266;
	}

	.d-tr {
		view {
			font-size: 24rpx;
			font-weight: bold;
		}

		.d-th:first-child,
		.d-td:first-child {
			width: 140rpx;
		}
	}
</style>