antdv 表格设置了列宽度但是不起效果 表格宽度仍然被内容撑得很长

const columns = [
  {
    title: "序号",
    dataIndex: "Index",
    width: 50,
    align: "center",
    customRender: ({ text, record, index }) => {
      return `${(current.value - 1) * pageSize.value + index + 1}`;
    },
  },
  {
    title: "名称",
    dataIndex: "name",
    width: 100, // 设置了却不起效果
    key: "name",
  },
 ]

解决

// 加入 tableLayout="fixed" 即可
<a-table
	tableLayout="fixed"
	>

参考

Antd Table布局指南

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
你可以使用 Ant Design Vue 提供的 Table 组件来实现每的筛选功能。首先,确保你已经安装了 Ant Design Vue 和相关的依赖。 在你的组件中,引入 Table 组件并设置的筛选属性。例如: ```vue <template> <a-table :columns="columns" :data-source="data" :pagination="false"> <!-- 其他表格内容 --> </a-table> </template> <script> import { ref } from 'vue'; import { Table } from 'ant-design-vue'; export default { components: { Table, }, setup() { const columns = ref([ { title: '姓名', dataIndex: 'name', key: 'name', filters: [ { text: 'John', value: 'John' }, { text: 'Smith', value: 'Smith' }, ], onFilter: (value, record) => record.name === value, }, // 其他配置 ]); const data = ref([ { key: '1', name: 'John', age: 32, address: 'New York' }, { key: '2', name: 'Smith', age: 25, address: 'London' }, // 其他数据 ]); return { columns, data, }; }, }; </script> ``` 在上面的示例中,我们定义了一个 `columns` 数组来配置表格。每个对象都包含了 `filters` 和 `onFilter` 属性。`filters` 是一个筛选选项数组,每个选项都包含 `text` 和 `value`。`onFilter` 是一个回调函数,用于根据选中的筛选值来过滤表格数据。 你可以根据实际情况自定义的筛选选项和筛选逻辑。然后,将 `columns` 数组和表格数据 `data` 绑定到 Table 组件相应属性上即可实现每的筛选功能。 希望这帮助到你!如果还有其他问题,请随时提问。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值