vue + antd中Table自定义列查询筛选

本文介绍了如何在Vue项目中结合Ant Design的Table组件,实现表格列的自定义查询筛选功能。通过HTML和JavaScript的配合,详细阐述了实现过程,并提供了相关参考链接。
摘要由CSDN通过智能技术生成

html

 <a-table
   :columns="columns"
   :data-source="projectTable"
   bordered
   :pagination='false' 
   size="middle"
   :scroll="{ x: '100%', y: 400 }"
 >
   <div
     slot="filterDropdown"
     slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
     style="padding: 8px"
   >
     <a-input
       :placeholder="`按${column.title}筛选`"
       v-model="searchText"
       style="width: 188px; margin-bottom: 8px; display: block;"
       @change="handleSearch()"
       @pressEnter="() => handleSearch()"
     />
     <a-button
       type="primary"
       size="small"
       style="width: 80px; margin-right: 20px"
       @click="() => handleSearch()"
     >
       筛选
     </a-b
  • 1
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue antd table 是一种非常方便的数据表格组件,可以用来展示和管理大量的数据信息。在使用,我们有时候需要在某个单元格里面嵌套一个表格,用来展示更详细的数据信息。这种场景下,我们需要实现vue antd table一格加多行的效果。 实现这个效果的方法有多种,这里介绍一种比较简单的方式: 1. 首先,在vue antd table找到需要嵌套的单元格,给它加上一个 slot 插槽。例如: ```html <a-table-column title="姓名"> <template slot-scope="text, record"> <span>{{ record.name }}</span> <div slot="expandedRowRender"> <p>更详细的信息。。。</p> <p>更详细的信息。。。</p> <p>更详细的信息。。。</p> </div> </template> </a-table-column> ``` 这里要注意,设置 slot 的名称为 expandedRowRender,这样才可以使多行数据展开在同一个单元格内。 2. 接着,在 a-table 添加一个属性,用来指定当前表格是否支持展开行:expandedRowRender。例如: ```html <a-table :columns="columns" :data-source="data" :pagination="false" :expanded-row-render="true"></a-table> ``` 这里要注意,设置 expanded-row-render 的值为 true,表示允许展开行。当然,还可以给 expanded-row-render 设置具体的属性值,比如属性值为 object 表示可以通过对象来配置展开的行。 3. 最后,在 table 添加一个事件监听函数,用来处理展开行功能的具体逻辑。例如: ```html <a-table :columns="columns" :data-source="data" :pagination="false" :expanded-row-render="true" @expandedRowsChange="onExpandedRowsChange"></a-table> ``` 在 onExpandedRowsChange 函数,我们可以进行一些表格展开和关闭的操作,例如: ```javascript methods: { onExpandedRowsChange(rows) { if (rows.length == 0) { // 关闭所有行 return; } console.log('展开行:', rows[0]); } } ``` 需要注意的是,由于 expandedRowRender 的值为 true,表示允许展开行,所以属性 @expandedRowsChange 才会生效,才能实现展开行的效果。 通过以上三个步骤,我们就可以实现vue antd table一格加多行的效果了。当然,具体实现方式还要根据自己的实际情况来进行调整,如果你还有其他更好的实现方式,欢迎在评论分享给大家。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值