devbox
很楠不爱3
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue表单筛选_vue 表格条件筛选

作者：很楠不爱3 | 2024-05-29 11:43:26

赞

踩

vue 表格条件筛选

目录

筛选

HTML

scss*

filterComp

排序

表格

自定义数据样式

inner-table

分页

删除

default-modal

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

  1. .search-wrap {
  2.   height: 60px;
  3.   display: flex;
  4.   align-items: center;
  5.   overflow: hidden;
  6.   padding: 0 20px;
  7.  
  8.   .selected-options-wrap {
  9.     flex: 1;
  10.  
  11.     .clear-btn {
  12.       display: inline-block;
  13.       text-align: center;
  14.       color: #dd2100;
  15.       margin-left: 12px;
  16.       padding: 0 6px;
  17.       border-radius: 4px;
  18.       background-color: rgba(221, 33, 0, .1);
  19.       cursor: pointer;
  20.     }
  21.   }
  22.  
  23.   .mds-tag {
  24.     padding-right: 0;
  25.     margin-left: 8px;
  26.     border-radius: 4px;
  27.     border: 1px solid #d9ecff;
  28.     cursor:default;
  29.  
  30.     .mds-btn {
  31.       height: auto;
  32.     }
  33.   }
  34.  
  35.   .mds-input-search {
  36.     width: 240px;
  37.  
  38.     ::v-deep .mds-input {
  39.       border-radius: 4px;
  40.     }
  41.   }
  42.  
  43.   .filter-btn {
  44.     margin-left: 12px;
  45.     position: relative;
  46.     
  47.     .mds-btn {
  48.       padding: 0;
  49.       width: 32px;
  50.       height: 32px;
  51.     }
  52.  
  53.     .filter-count {
  54.       width: 18px;
  55.       height: 18px;
  56.       line-height: 18px;
  57.       text-align: center;
  58.       position: absolute;
  59.       top: -9px;
  60.       right: -9px;
  61.       color: #fff;
  62.       background-color: #0364ff;
  63.       border-radius: 50%;
  64.     }
  65.  
  66.     .filter-icon {
  67.       width: 28px;
  68.       height: 28px;
  69.       object-fit: cover;
  70.       position: relative;
  71.       top: 1px;
  72.     }
  73.  
  74.     .filter-num {
  75.       position: absolute;
  76.       top: -10px;
  77.       right: -2px;
  78.       width: 16px;
  79.       height: 16px;
  80.       border-radius: 50%;
  81.       background-color: #1564ff;
  82.       color: #fff;
  83.       font-size: 12px;
  84.       line-height: 16px;
  85.     }
  86.   }
  87. }

filterComp

  1. <template>
  2.   <mds-drawer
  3.     title="条件筛选"
  4.     :visibility="visibility"
  5.     size="720px"
  6.     @close="cancelFilterDrawer"
  7.   >
  8.     <mds-form label-width="100px" :model="filterList" label-position="right">
  9.       <mds-form-item label="发布状态">
  10.         <mds-select placeholder="发布状态" style="width: 100%" clearable v-model="filterList.releStat">
  11.           <mds-option label="未发布" value="0" />
  12.           <mds-option label="已发布" value="1" />
  13.         </mds-select>
  14.       </mds-form-item>
  15. ...
  16.  
  17.       <mds-form-item label="更新时间">
  18.         <mds-date-picker
  19.           v-model="timeArr"
  20.           type="daterange"
  21.           range-separator="至"
  22.           start-placeholder="开始日期"
  23.           end-placeholder="结束日期"
  24.           format="yyyy-MM-dd"
  25.           value-format="yyyy-MM-dd"
  26.           @change="changeTime"
  27.         ></mds-date-picker>
  28.       </mds-form-item>
  29.     </mds-form>
  30.  
  31.     <template slot="footer">
  32.       <mds-button @click="cancelFilterDrawer">取消</mds-button>
  33.       <mds-button type="primary" @click="saveFilter">确认</mds-button>
  34.     </template>
  35.   </mds-drawer>
  36. </template>
  37.  
  38. <script lang="ts">
  39. import { Component, Vue, Prop } from 'vue-property-decorator'
  40.  
  41. @Component({
  42.   components: {}
  43. })
  44. export default class FilterComp extends Vue {
  45.   @Prop({ required: true }) private visibility!: boolean
  46.  
  47.   timeArr = []
  48.  
  49.   filterList: any = {
  50.     moduTyp: '', // 模块
  51.     releStat: "", //发布状态
  52.     updateStartDate: '',
  53.     updateEndDate: ''
  54.   }
  55.  
  56.   // 修改时间
  57.   changeTime(val: any) {
  58.     this.filterList.updateStartDate = val ? val[0] : ''
  59.     this.filterList.updateEndDate = val ? val[1] : ''
  60.   }
  61.  
  62.   // 清除选项
  63.   clearOptions(option: string) {
  64.     if (option === 'all') {
  65.       this.filterList = {}
  66.       this.timeArr = []
  67.     } else if (option === 'time') {
  68.       this.filterList.updateStartDate = ''
  69.       this.filterList.updateEndDate = ''
  70.       this.timeArr = []
  71.     } else {
  72.       this.filterList[option] = ''
  73.     }
  74.  
  75.     this.saveFilter()
  76.   }
  77.  
  78.   // 取消筛选
  79.   cancelFilterDrawer() {
  80.     this.$emit('update:visibility', false)
  81.   }
  82.  
  83.   // 保存筛选
  84.   saveFilter() {
  85.     const data = {
  86.       ...this.filterList
  87.     }
  88.  
  89.     this.$emit('changeFilter', data)
  90.     this.cancelFilterDrawer()
  91.   }
  92. }
  93. </script>

<mds-option label="未发布" value="0" />  string

<mds-option label="未发布" :value="0" /> number

排序

  1. <el-table :data="tableData" header-row-class-name="table-header" @sort-change="sortChange">
  2. ....
  3. </el-table>
  1.  confirmpageQuery() {
  2.     this.loading = true
  3.     const params = {
  4.       pageNum: this.pageInfo.currentPage,
  5.       pageSize: this.pageInfo.pageSize,
  6.       moduTyp: '',
  7.       releStat: "",
  8.       fuzzySearch: this.searchVal,
  9.       updateStartDate: "",
  10.       // updateEndDate: "",
  11.       updateEndDate: "",
  12.       ...this.filterData,
  13.       ...this.sortProps
  14.     }
  15.  
  16.     confirmpageQuery(params).then((res: any) => {
  17.       if (res && res.code == 200) {
  18.         this.pageInfo.total = res.data.totalElements
  19.         this.tableData = res.data.data || []
  20.         this.permissionMap = res.data.permissionMap || {}
  21.       }
  22.     }).catch((e: any) => {
  23.       this.$message.error(e && e.msg)
  24.     }).finally(() => {
  25.       this.loading = false
  26.     })
  27.   }
  28.  
  29. class YourClass {
  30.   // 定义 sortProps 对象，用于存储排序属性的状态
  31.   sortProps: any = {
  32.     versionNumSort: '',
  33.     releStatSort: '',
  34.     updateDateSort: ''
  35.   }
  36.  
  37.   // sortChange 方法用于处理排序变化
  38.   sortChange(arguments: any) {
  39.     const { column, prop, order } = arguments
  40.  
  41.     // 定义 orderVal 对象，用于存储排序方式的值（升序和降序）
  42.     const orderVal: any = {
  43.       ascending: 1,
  44.       descending: 0
  45.     }
  46.  
  47.     // 定义 propName 对象，用于映射排序属性和 sortProps 对象的属性名
  48.     const propName: any = {
  49.       versionNum: 'versionNumSort',
  50.       releStat: 'releStatSort',
  51.       updTm: 'updateDateSort'
  52.     }
  53.  
  54.     // 将 sortProps 对象中所有属性的值初始化为空，以便重新设置排序状态
  55.     for (let key in this.sortProps) {
  56.       this.sortProps[key] = ''
  57.     }
  58.  
  59.     // 根据传入的排序属性和排序方式，更新 sortProps 对象中对应的属性值
  60.     this.sortProps[propName[prop]] = orderVal[order]
  61.  
  62.     // 调用 confirmpageQuery 方法，可能是用于触发其他逻辑或执行查询等操作
  63.     this.confirmpageQuery()
  64.   }
  65.  
  66.   // 定义 confirmpageQuery 方法，可能是其他逻辑处理的入口
  67.   confirmpageQuery() {
  68.     // 在这里执行其他逻辑或查询操作
  69.     // ...
  70.   }
  71. }

表格

  1.       <el-table :data="tableData" header-row-class-name="table-header" @sort-change="sortChange">
  2.         <!-- 展开 -->
  3.         <el-table-column width="30" type="expand" class-name="expend-row">
  4.           <!-- 自定义样式slot-scope="scope" {{ scope_sub.row.confmVersion }} -->
  5.           <template slot-scope="scope">
  6.             <el-table :data="scope.row.confmReleVOS" style="width: 100%;margin: 0;" class="inner-table">
  7.               <!-- 缩进 -->
  8.               <el-table-column width="30"></el-table-column>
  9.               <el-table-column prop="confmVersion" label="版本号" width="120">
  10.                 <template slot-scope="scope_sub">
  11.                   <div>
  12.                     {{ scope_sub.row.confmVersion }}
  13.                     <span v-if="scope_sub.row.isCurrentVersion" class="version-current">当前版本</span>
  14.                   </div>
  15.                 </template>
  16.               </el-table-column>
  17.  
  18.               <el-table-column prop="name" label="生效区间" width="220">
  19.                 <template slot-scope="scope_sub">
  20.                   {{ scope_sub.row.effectiveDateRange }}
  21.                 </template>
  22.               </el-table-column>
  23.  
  24.               <el-table-column prop="releName" label="发布名称" />
  25.               <!-- show-overflow-tooltip在用户将鼠标悬停在容器上时显示一个工具提示，以显示溢出的内容 -->
  26.               <el-table-column prop="releDesc" label="发布说明" show-overflow-tooltip />
  27.  
  28.               <el-table-column label="操作" width="150">
  29.                 <template slot-scope="scope_sub">
  30.                   <!-- <span v-if="permissionMap.hasWorkbenchPageReleaseViewPer" class="table-operate" @click="toDetail(scope.row, scope_sub.row)">查看</span> -->
  31.                   <span class="table-operate" @click="toDetail(scope.row, scope_sub.row)">查看</span>
  32.                 </template>
  33.               </el-table-column>
  34.             </el-table>
  35.           </template>
  36.         </el-table-column>
  37.  
  38.         <el-table-column prop="confmNm" label="数据确认版本名称" min-width="120" show-overflow-tooltip />
  39.         <el-table-column prop="moduTyp" label="模块" width="170" />
  40.  
  41.         <el-table-column prop="releStat" label="当前状态" sortable="custom" width="120">
  42.           <template slot-scope="scope">
  43.             <div :class="{ 'status-published': scope.row.releStat === 1, 'status-unpublished': scope.row.releStat === 0 }">
  44.               {{ scope.row.releStatNm }}
  45.             </div>
  46.             <!-- <div class="status-published" v-if="scope.row.releStat === 1">{{ scope.row.releStatNm }}</div>
  47.             <div class="status-unpublished" v-if="scope.row.releStat === 0">{{ scope.row.releStatNm }}</div> -->
  48.           </template>
  49.         </el-table-column>
  50.  
  51.         <el-table-column prop="versionNum" label="版本数" sortable="custom" width="90" />
  52.         <el-table-column prop="creator" label="创建人" width="120" />
  53.         <el-table-column prop="updTm" label="更新时间" width="180" sortable="custom" />
  54.  
  55.         <!-- <el-table-column label="操作" width="220">
  56.           <template slot-scope="scope">
  57.             <span v-if="permissionMap.hasWorkbenchPageConfigEditPer" class="table-operate" @click="toEdit(scope.row)">编辑</span>
  58.             <span v-if="permissionMap.hasWorkbenchPageConfigReleasePer" class="table-operate" @click="handlePublish(scope.row)">{{ scope.row.releStat === 0 ? '发布' : scope.row.releStat === 1 ? '再次发布' : '' }}</span>
  59.             <span v-if="permissionMap.hasWorkbenchPageConfigDeletePer" class="table-operate" @click="handleDelete(scope.row)">删除</span>
  60.           </template>
  61.         </el-table-column> -->
  62.  
  63.         <el-table-column label="操作" width="220">
  64.           <template slot-scope="scope">
  65.             <span class="table-operate" @click="toEdit(scope.row)">编辑</span>
  66.             <span class="table-operate" @click="handlePublish(scope.row)">{{ scope.row.releStat === 0 ? '发布' : scope.row.releStat === 1 ? '再次发布' : '' }}</span>
  67.             <span class="table-operate" @click="handleDelete(scope.row)">删除</span>
  68.           </template>
  69.         </el-table-column>
  70.       </el-table>

自定义数据样式

  1.         <el-table-column prop="releStat" label="当前状态" sortable="custom" width="120">
  2.           <template slot-scope="scope">
  3.             <div :class="{ 'status-published': scope.row.releStat === 1, 'status-unpublished': scope.row.releStat === 0 }">
  4.               {{ scope.row.releStatNm }}
  5.             </div>
  6.         </el-table-column>

inner-table

分页

删除

loading

 

 添加slot=footer覆盖原有样式

 

default-modal

  1. <template>
  2.   <mds-modal
  3.     class="confirm-delete-modal"
  4.     :class="{ 'confirm-delete-modal-warning': type === 'warning' }"
  5.     :visibility="visibility"
  6.     :title="title"
  7.     :width="width"
  8.     :show-close="false"
  9.   >
  10.     <div v-if="content" class="content">{{ content }}</div>
  11.     <slot></slot>
  12.  
  13.     <span slot="footer" class="mds-dialog-footer">
  14.       <mds-button @click="footActionClick('cancel')">{{ cancelText }}</mds-button>
  15.       <mds-button
  16.         type="primary"
  17.         :loading="loading"
  18.         @click="footActionClick('confirm')"
  19.       >
  20.         <mds-icon v-if="loading" type="line-sync" class="mds-btn-right" spin />
  21.         {{ confirmText }}
  22.       </mds-button>
  23.     </span>
  24.   </mds-modal>
  25. </template>
  26.  
  27. <script lang="ts">
  28. import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
  29.  
  30. @Component({
  31.   components: {}
  32. })
  33. export default class defaultModal extends Vue {
  34.   @Prop({ required: true }) private visibility!: boolean
  35.   // ! 表示非空断言，告诉 TypeScript 该属性不会为 null 或 undefined
  36.   @Prop({ required: true }) private title!: string
  37.   // ?: string 表示 content 是一个可选的属
  38.   @Prop() private content?: string
  39.   @Prop({ default: '420px' }) private width!: string
  40.   @Prop({ default: false }) private showClose!: boolean
  41.   @Prop({ default: '确定' }) private confirmText!: string
  42.   @Prop({ default: '取消' }) private cancelText!: string
  43.   @Prop({ default: 'normal' }) private type!: string
  44.   @Prop({
  45.     default: () => {
  46.       return (cb: any) => {
  47.         cb && cb()
  48.       }
  49.     }
  50.   })
  51.   private confirmCb!: any
  52.  
  53.   @Prop({
  54.     default: () => {
  55.       return (cb: any) => {
  56.         cb && cb()
  57.       }
  58.     }
  59.   })
  60.   private cancelCb!: any
  61.  
  62.   private loading = false
  63.  
  64.   private loadingIns = {
  65.     start: this.changeLoading.call(this, true),
  66.     end: this.changeLoading.call(this, false)
  67.   }
  68.  
  69.   private changeLoading(bool = false): any {
  70.     return () => {
  71.       this.loading = bool
  72.     }
  73.   }
  74.  
  75.   private footActionClick(type = 'cancel'): void {
  76.     if (this.loading) return
  77.     const cb = () => {
  78.       this.$emit('update:visibility', false)
  79.     }
  80.     if (type === 'cancel') {
  81.       this.cancelCb(cb, this.loadingIns)
  82.     }
  83.     if (type === 'confirm') {
  84.       this.confirmCb(cb, this.loadingIns)
  85.     }
  86.   }
  87.  
  88.   private handleClose(done: any): void {
  89.     if (this.loading) return
  90.     this.$emit('update:visibility', false)
  91.   }
  92. }
  93. </script>
  94.  
  95. <style lang="scss" scoped>
  96. // ::v-deep .mds-modal-mask, .mds-modal-wrap {
  97. //   z-index: 2000;
  98. // }
  99. .confirm-delete-modal {
  100.   ::v-deep {
  101.     .mds-modal-title {
  102.       display: flex;
  103.       align-content: center;
  104.       // &::before {
  105.       //   content: '\EBD2';
  106.       //   color: #3370ff;
  107.       //   display: inline-block;
  108.       //   font-family: 'mdsicon';
  109.       //   font-size: 22px;
  110.       //   margin-right: 16px;
  111.       // }
  112.     }
  113.  
  114.     .mds-modal-bottom {
  115.       border: none;
  116.     }
  117.   }
  118.  
  119.   .content {
  120.     padding-left: 38px;
  121.   }
  122. }
  123.  
  124. .confirm-delete-modal-warning {
  125.   // ::v-deep .mds-modal-title {
  126.   //   &::before {
  127.   //     content: '\EBC9';
  128.   //     color: #f80;
  129.   //   }
  130.   // }
  131.  
  132.   .mds-dialog-footer {
  133.     margin-top: 16px;
  134.     font-size: 14px;
  135.     text-align: right;
  136.  
  137.     // .mds-btn {
  138.     //   font-size: 12px;
  139.     //   height: 28px;
  140.     //   line-height: 20px;
  141.     //   min-width: 48px;
  142.     //   padding: 3px 7px;
  143.     //   color: #383c41;
  144.  
  145.     //   &:hover {
  146.     //     background-color: #eee;
  147.     //     border-color: #d9d9d9;
  148.     //   }
  149.  
  150.     //   &:last-child {
  151.     //     color: #f54a45;
  152.     //     border-color: #f54a45;
  153.  
  154.     //     &:hover {
  155.     //       background-color: rgb(255, 233, 233);
  156.     //     }
  157.     //   }
  158.     // }
  159.  
  160.     .mds-btn-loading {
  161.       background-color: transparent;
  162.     }
  163.   }
  164. }
  165.  
  166. ::v-deep .mds-modal-body {
  167.   min-height: 0;
  168. }
  169. </style>
自定义元素的插槽-占位符
  1. <!-- 自定义元素定义 -->
  2. <custom-element>
  3.   <h1><slot></slot></h1>
  4.   <p>This is some default content.</p>
  5. </custom-element>
  6.  
  7. <!-- 使用自定义元素 -->
  8. <custom-element>
  9.   Hello, I am inserted into the slot!
  10. </custom-element>

 

  1. <!-- 删除二次确认弹窗 -->
  2.     <default-modal :visibility.sync="defaultModalInfo.visibility" :type="defaultModalInfo.type"
  3.       :title="defaultModalInfo.title" :content="defaultModalInfo.content" :confirm-text="defaultModalInfo.confirmText"
  4.       :cancel-text="defaultModalInfo.cancelText" :confirm-cb="defaultModalInfo.confirmCb">
  5.       <div>
  6.         <mds-icon type="fill-solid-exclamation-circle" style="color:#e6a23c;font-size:18px" />
  7.         确定要删除数据吗?
  8.       </div>
  9.     </default-modal>
  10. // 删除
  11. handleDelete(row: any) {
  12.   // 创建一个对象来设置模态框的信息
  13.   this.defaultModalInfo = {
  14.     visibility: true,     // 设置模态框可见性为true，即显示模态框
  15.     type: 'warning',      // 设置模态框类型为警告，可以根据需要修改为其他类型
  16.     title: '提示',        // 设置模态框标题为'提示'
  17.     content: '',          // 设置模态框内容为空，可以根据需要填充具体的提示信息
  18.     confirmText: '确定',  // 设置确认按钮文本为'确定'
  19.     cancelText: '取消',   // 设置取消按钮文本为'取消'
  20.     // @ts-ignore: 不可达代码错误（这里是为了忽略可能出现的编译错误，因为后面的 confirmCb 函数在当前环境下可能无法触发）
  21.     confirmCb: (...args: any) => this.confirmDelete(row.id, ...args) // 设置确认按钮点击后的回调函数，传入当前行的id以及可能的其他参数
  22.   };
  23. }
  24.  
  25. // 确认删除
  26. private async confirmDelete(id: number, cb: any, loadingIns: any) {
  27.   // 如果loadingIns存在并且具有start方法，则调用它，用于开始加载状态
  28.   loadingIns && loadingIns.start && loadingIns.start();
  29.  
  30.   // 调用服务器端接口执行删除操作，传入id参数
  31.   const res: any = await confirmpageDelete(id);
  32.  
  33.   // 如果loadingIns存在并且具有end方法，则调用它，用于结束加载状态
  34.   loadingIns && loadingIns.end && loadingIns.end();
  35.  
  36.   // 如果服务器返回结果为空或者code不等于200，则删除失败，不做任何操作
  37.   if (!res || res.code != 200) {
  38.     // 可以根据需要，使用某种方式显示删除失败的提示信息，这里是注释掉的代码
  39.     // this.$message.error(res && res.msg)
  40.     return;
  41.   }
  42.  
  43.   // 如果传入了回调函数cb，则执行回调函数
  44.   cb && cb();
  45.  
  46.   // 使用消息框提示删除成功
  47.   this.$message.success('删除成功');
  48.  
  49.   // 调用刷新列表的方法，以更新数据
  50.   this.confirmpageQuery();
  51. }
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/641973
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号