vue表单筛选

目录

筛选

HTML

scss*

filterComp

排序

表格

自定义数据样式

inner-table

分页

删除

default-modal

自定义元素的插槽-占位符

---

.search-wrap {
  height: 60px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 20px;

  .selected-options-wrap {
    flex: 1;

    .clear-btn {
      display: inline-block;
      text-align: center;
      color: #dd2100;
      margin-left: 12px;
      padding: 0 6px;
      border-radius: 4px;
      background-color: rgba(221, 33, 0, .1);
      cursor: pointer;
    }
  }

  .mds-tag {
    padding-right: 0;
    margin-left: 8px;
    border-radius: 4px;
    border: 1px solid #d9ecff;
    cursor:default;

    .mds-btn {
      height: auto;
    }
  }

  .mds-input-search {
    width: 240px;

    ::v-deep .mds-input {
      border-radius: 4px;
    }
  }

  .filter-btn {
    margin-left: 12px;
    position: relative;
    
    .mds-btn {
      padding: 0;
      width: 32px;
      height: 32px;
    }

    .filter-count {
      width: 18px;
      height: 18px;
      line-height: 18px;
      text-align: center;
      position: absolute;
      top: -9px;
      right: -9px;
      color: #fff;
      background-color: #0364ff;
      border-radius: 50%;
    }

    .filter-icon {
      width: 28px;
      height: 28px;
      object-fit: cover;
      position: relative;
      top: 1px;
    }

    .filter-num {
      position: absolute;
      top: -10px;
      right: -2px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background-color: #1564ff;
      color: #fff;
      font-size: 12px;
      line-height: 16px;
    }
  }
}

filterComp

 string

 number

排序

....

 confirmpageQuery() {
    this.loading = true
    const params = {
      pageNum: this.pageInfo.currentPage,
      pageSize: this.pageInfo.pageSize,
      moduTyp: '',
      releStat: "",
      fuzzySearch: this.searchVal,
      updateStartDate: "",
      // updateEndDate: "",
      updateEndDate: "",
      ...this.filterData,
      ...this.sortProps
    }

    confirmpageQuery(params).then((res: any) => {
      if (res && res.code == 200) {
        this.pageInfo.total = res.data.totalElements
        this.tableData = res.data.data || []
        this.permissionMap = res.data.permissionMap || {}
      }
    }).catch((e: any) => {
      this.$message.error(e && e.msg)
    }).finally(() => {
      this.loading = false
    })
  }

class YourClass {
  // 定义 sortProps 对象，用于存储排序属性的状态
  sortProps: any = {
    versionNumSort: '',
    releStatSort: '',
    updateDateSort: ''
  }

  // sortChange 方法用于处理排序变化
  sortChange(arguments: any) {
    const { column, prop, order } = arguments

    // 定义 orderVal 对象，用于存储排序方式的值（升序和降序）
    const orderVal: any = {
      ascending: 1,
      descending: 0
    }

    // 定义 propName 对象，用于映射排序属性和 sortProps 对象的属性名
    const propName: any = {
      versionNum: 'versionNumSort',
      releStat: 'releStatSort',
      updTm: 'updateDateSort'
    }

    // 将 sortProps 对象中所有属性的值初始化为空，以便重新设置排序状态
    for (let key in this.sortProps) {
      this.sortProps[key] = ''
    }

    // 根据传入的排序属性和排序方式，更新 sortProps 对象中对应的属性值
    this.sortProps[propName[prop]] = orderVal[order]

    // 调用 confirmpageQuery 方法，可能是用于触发其他逻辑或执行查询等操作
    this.confirmpageQuery()
  }

  // 定义 confirmpageQuery 方法，可能是其他逻辑处理的入口
  confirmpageQuery() {
    // 在这里执行其他逻辑或查询操作
    // ...
  }
}

表格

自定义数据样式