美文网首页
antd-vue的table组件的筛选自动清空

antd-vue的table组件的筛选自动清空

作者: 花影_62b4 | 来源:发表于2021-12-21 16:40 被阅读0次

    思路:把columns放在computed,并设置filteredValue为filters对应的属性,filters在table的change事件的第二个参数可以取到

    computed: {
    let columns(){
          let columns = [
            {
              title: "店铺名称",
              dataIndex: "shopEntityName",
              key: "shopEntityName",
              width: 120,
              ellipsis: true,
              fixed: "left",
            },
            {
              title: "楼层",
              dataIndex: "storey",
              key: "storey",
              width: 75,
              fixed: "left",
              filterMultiple:false,
              filters: this.floorList,   
              filteredValue: (this.filteredInfo&&this.filteredInfo.storey) || null,          
            },
            {
              title: "业种",
              dataIndex: "shopTypeName",
              key: "shopTypeName",
              width: 75,
              fixed: "left",
              filterMultiple:false,
              filters: this.typeList,
              filteredValue: (this.filteredInfo&&this.filteredInfo.shopTypeName) || null,
            },
    ]
    return columns;
    }
    },
    methods:{
      clear(){
          this.filteredInfo=null;
      }
    }
    

    2、fixed和ellipsis和row-selection一起用时,ellipsis失效问题解决
    .passAuditPage ::v-deep.ant-table-fixed-left table,.passAuditPage ::v-deep.ant-table-fixed-right-right table{ width:min-content; }

    相关文章

      网友评论

          本文标题:antd-vue的table组件的筛选自动清空

          本文链接:https://www.haomeiwen.com/subject/xhmxqrtx.html