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

最新推荐文章于 2025-03-04 09:31:42 发布

NAVILLERA

最新推荐文章于 2025-03-04 09:31:42 发布

阅读量6k

点赞数 1

文章标签： vue html5

本文链接：https://blog.youkuaiyun.com/weixin_43923202/article/details/123992620

版权

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

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

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-button>
     <a-button
       size="small"
       style="width: 80px"
       @click="() => handleReset()"
     >
       重置
     </a-button>
   </div>
   <a-icon
     slot="filterIcon"
     slot-scope="filtered"
     type="search"
     :style="{ color: filtered ? '#108ee9' : undefined }"
   />
 </a-table>

export default {
  data() {
    return {
      projectTable:[],
      searchText:"",
      columns:[
        {
          title: '单位',
          dataIndex: 'orgName',
          key: 'orgName',
          width: 180,
          scopedSlots: { filterDropdown: 'filterDropdown', filterIcon: 'filterIcon', customRender: 'goods' },
          onFilter: (value, record) => record.orgName.toString().toLowerCase().includes(value.toLowerCase()),
        },
        {
          title: '工程项目数量',
          dataIndex: 'projectSum',
          key: 'projectSum',
          width: 120,
        },
        {
          title: '市场化用工人员数量',
          width: 360,
          children: [
            {
              title: '股东方人员数量',
              dataIndex: 'gdfSum',
              key: 'gdfSum',
            },
            {
              title: '劳务派遣人员数量',
              dataIndex: 'lwpqSum',
              key: 'lwpqSum',
            },
            {
              title: '外聘人员数量',
              dataIndex: 'wpSum',
              key: 'wpSum',
            },
          ],
        },
        {
          title: '投诉统计',
          width: 700,
          children: [
            {
              title: '投诉数量',
              dataIndex: 'tsTssl',
              key: 'tsTssl',
            },
            {
              title: '投诉总人数',
              dataIndex: 'tsSjrs',
              key: 'tsSjrs',
            },
            {
              title: '投诉总金额(万元)',
              dataIndex: 'tsSjje',
              key: 'tsSjje',
            },
            {
              title: '结案数量',
              dataIndex: 'solveJasl',
              key: 'solveJasl',
            },
            {
              title: '结案总人数',
              dataIndex: 'solveJars',
              key: 'solveJars',
            },
            {
              title: '结案总金额(万元)',
              dataIndex: 'solveJaje',
              key: 'solveJaje',
            },
          ],
        },
      ],
    };
  },

  methods: {
    handleSearch(){
      this.orgChart();
    },
    handleReset(){
      this.searchText = "";
      this.orgChart();
    },
    orgChart(){
      orgChart({startMonth:this.proStartMonth,endMonth:this.proEndMonth,orgName:this.searchText}).then(res=>{
        this.projectTable = res.data.data;
      })
    },
  },
  mounted(){
    this.orgChart();
  },
};

在这里插入图片描述
参考原文：https://blog.youkuaiyun.com/hellowwj0715/article/details/105135268/