uniapp用的uview组件库怎么实现每行单选每列多选

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>

```

啥意思?