uniapp用的uview组件库,要怎么才能实现每行单选每列多选
用 uni-list 和 uni-list-item 以下是一个简单的示例可以参考下
<template>
<uni-list>
<uni-list-item title="行1" :options="options1" :checked="checked1" @change="handleRowChange"></uni-list-item>
<uni-list-item title="行2" :options="options1" :checked="checked1" @change="handleRowChange"></uni-list-item>
<uni-list-item title="行3" :options="options1" :checked="checked1" @change="handleRowChange"></uni-list-item>
<uni-list-item title="行4" :options="options1" :checked="checked1" @change="handleRowChange"></uni-list-item>
</uni-list>
</template>
<script>
import { UniList, UniListItem } from 'uview-ui';
export default {
components: {
UniList,
UniListItem,
},
data() {
return {
options1: [
{ value: '1', label: '列1' },
{ value: '2', label: '列2' },
{ value: '3', label: '列3' },
],
options2: [
{ value: '1', label: '行1' },
{ value: '2', label: '行2' },
{ value: '3', label: '行3' },
{ value: '4', label: '行4' },
],
checked1: [],
checked2: [],
};
},
methods: {
// 处理每行单选的改变事件
handleRowChange(e) {
const { index, checked } = e.currentTarget.dataset;
if (checked) {
// 清除其他行的选中状态
this.checked2 = this.checked2.filter((item) => item.split('-')[0] !== index.toString());
} else {
// 清除同行其他选项的选中状态
this.checked2 = this.checked2.filter((item) => item.split('-')[0] !== index.toString());
}
},
},
};
</script>
```
啥意思?