ant-design的table多选操作复选框的是否可选

在这里插入图片描述
getCheckboxProps 列表选择属性
注意,我们应该返回一个对象而不是boolean,如果不是的话,则会报错

    <a-table :row-selection=rowSelection :columns="columns" :data-source="data" :pagination="{
      position: ['bottomCenter'],
      size: 'small',
      current: done.page,
      total: done.total,
      pageSize: done.num,
    }">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'status'">
          <span v-if="text == 1">在库</span>
          <span v-else>不在库</span>
        </template>
      </template>
    </a-table>
    <script lang="ts">
        const rowSelection: any = computed(() => {
      return {
        hideSelectAll: true,
        selectedRowKeys: state.selectedRowKeys,
        onChange: onSelectChange,
        getCheckboxProps: (record:any) => {
          if (record.status === 1) {
            return { disabled: true };
          } else {
            return {};
          }
        },
      }
    })
    <script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Ant Design Vue 1.7 中,可以通过 `a-table` 的 `columns` 属性中添加一个 `an-checkbox-column` 列来添加框。 以下是一个示例代码: ```html <template> <a-table :columns="columns" :data-source="dataSource" row-key="id" @row-click="onRowClick"> <a-table-column title="#" dataIndex="id" /> <a-table-column title="姓名" dataIndex="name" /> <a-table-column title="年龄" dataIndex="age" /> <a-table-column title="地址" dataIndex="address" /> <a-table-column title="操作" :render="renderAction" /> <a-table-column title="择" :width="80" :custom-render="renderCheckbox" :fixed="true" align="center" /> </a-table> </template> <script> export default { data() { return { dataSource: [ { id: 1, name: '张三', age: 18, address: '北京市朝阳区' }, { id: 2, name: '李四', age: 20, address: '上海市浦东新区' }, { id: 3, name: '王五', age: 22, address: '广州市天河区' } ] }; }, methods: { renderAction(h, { row }) { return h('a', '编辑'); }, renderCheckbox(h, { row }) { return h('a-checkbox', { props: { value: row.checked }, on: { input: value => { row.checked = value; } } }); }, onRowClick(row) { row.checked = !row.checked; } }, computed: { columns() { return [ // 其他列定义 { title: '择', dataIndex: 'checked', width: 80, align: 'center', render: (text, record) => { return <a-checkbox v-model={record.checked} />; } } ]; } } }; </script> ``` 在这个示例中,我们添加了一个 `an-checkbox-column` 列,并在 `renderCheckbox` 方法中渲染了框。同时,我们在 `columns` 属性中添加了一个 `checked` 列,并在 `render` 方法中渲染了框。我们还添加了一个 `onRowClick` 方法,用于在行点击时切换框的状态。 在实际使用中,您可以根据实际需求对框的样式和行为进行自定义。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值