vue3+antd的table做gitea里面团队设置中允许访问仓库单元的功能。

本文链接：https://blog.csdn.net/m0_63108819/article/details/125320104

本文介绍了如何在Vue.js应用中利用原生radio组件来实现表格内的权限选择功能。通过v-model绑定同一值，可以方便地切换表格单元格的'无权访问'、'读取'和'写入'权限状态。示例代码展示了如何在A-Table组件中结合模板和ts逻辑来创建这个功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.功能效果：

2.原理：

使用原生radio,v-model绑定同一个值.

vue官方api: 表单输入绑定 | Vue.js (vuejs.org)

3.html：

<a-form-item name="unitList" label="允许访问仓库单元">
      <a-table :columns="columns" :data-source="tableData" row-key="id" bordered :pagination="false">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'noAccess'">
            <input id="one" v-model="record.value" type="radio" value="noAccess" />
          </template>
          <template v-if="column.key === 'read'">
            <input id="two" v-model="record.value" type="radio" value="read" />
          </template>
          <template v-if="column.key === 'write'">
            <input id="three" v-model="record.value" type="radio" value="write" />
          </template>
        </template>
      </a-table>
    </a-form-item>

4.ts:

<script lang="ts" setup>
const columns = computed(() => [
  { title: '单元', dataIndex: 'name', key: 'name' },
  { title: '无权访问权限', dataIndex: 'noAccess', key: 'noAccess' },
  { title: '读取', dataIndex: 'read', key: 'read' },
  { title: '写入', dataIndex: 'write', key: 'write' },
]);

const tableData = ref([
  { id: 1, name: '代码', value: 'noAccess' },
  { id: 2, name: '工单', value: 'noAccess' },
  { id: 3, name: '合并请求', value: 'noAccess' },
  { id: 4, name: '版本发布', value: 'noAccess' },
  { id: 5, name: '百科', value: 'noAccess' },
  { id: 6, name: '项目', value: 'noAccess' },
]);

</script>