定制栏目 --- 关于el-table 的显示隐藏的列

标签：el const data value --- params table type row

 

  <el-button  type="primary" plain icon="el-icon-s-operation" @click="columsVisible = true" :loading="handleTotalChecked">定制栏目</el-button>   需要的页面引入组件： <div class="tableList">             <tableList ref="tableList" @handleaPage="getPage" @handleParamsQuery="paymentpage" @handleNo="handleApplyNo" @handleSelect="selectHandle" :columnsList="columnsList" @handleSelectListId="selectTableListId" @handleRowSee ="rowSee"></tableList>         </div>  <BaseCustomColumns v-if="columsVisible" ref="customerColumns"  :visible="columsVisible" :columns.sync="columnsList" :columns_copy="columnsList_copy" :tablePath="tablePath" @close=" columsVisible= false" @resetAll="resetAll"/>   import BaseCustomColumns from "@/components/Base/BaseCustomColumns/index.vue"; import tableList  from "./table.vue";   data(){ 　　return {　  　　　　columnsList: paymenntColumnList, 　　　　tablePath: '/settleAccounts/payment', 　　　　columsVisible: false, 　　　　columnsList_copy: [], 　　} }  created(){ 　　this.columnsList_copy = deepClone(this.columnsList); 　　if(this.$route.name.includes('Panymentaudit')){    //判断是新增还是详情             this.panymentAuditInfo=1;             this.getQuery()         }else{             this.getQuery()         } }  // 获取到的更新页码数据         getPage(val){             let params={                ...this.formInline,                 pageNo:val.pageNo,                 pageSize:val.pageSize             }             this.$refs.tableList.searchData(params);         },  　　// 更新页码后，获取顶部搜索数据         paymentpage(){             this.$nextTick(()=>{                 this.$refs.tableList.getParamsData(this.ruleForm);             })         }, // 获取到的更新页码数据         getPage(val){             let params={                ...this.formInline,                 pageNo:val.pageNo,                 pageSize:val.pageSize             }             this.$refs.tableList.searchData(params);         }, // 点击表格         handleApplyNo(row){             if(this.$route.name.includes('Panymentaudit')){                 this.$router.push({                     path:`/settleAccounts/paymentDetial/${row.applyNo}`,                     query: {                         tranPaymentId:row.tranPaymentId,                         applyNo:row.applyNo,                         editType:"edit",
                    }                 })            }else{                 this.$router.push({                     path:`/settleAccounts/paymentDetial/${row.applyNo}`,                     query: {                         tranPaymentId:row.tranPaymentId,                         editType:"edit",                         showInfo:true,                         // paymentCorpName:row.nameCn,                         // paymentCorpId:row.paymentCorpId,
                    }                 })            }         }, 　　selectHandle(val){             this.ids = val.ids;             this.selectList = val.list;         }, 　　 selectTableListId(val){           if(val.data.length==0){             this.$message.warning("请勾选一条或多条数据!");             return  false           }else{
            if(val.val=='delete'){               let params={                 ids:val.data.toString()               }               this.$confirm("此操作将删除数据,是否继续?", "提示", {                 confirmButtonText: "确定",                 cancelButtonText: "取消",                 type: "warning",               })                 .then(() => {                   salesLeadsdelete(params).then((res) => {                     if (res.code == 0) {                       this.$message.success("删除成功!");                       this.paymentpage();                     }                   });                 })             }else{               this.salesDialogVisible = true;                this.$nextTick(()=>{                 this.$refs.salesTransfer.salesTranfer(val.data)               })              }
          }         }, // 行 预览     async rowSee(row){         if(!row.openReportId){             this.$message.warning("请去详情选择格式!");             return false         }         let params={             linkId:row.tranPaymentId,             openReportId:row.openReportId,             type:"I"         }         let location= await getReportUrlByType(params);         if(location.code==0){             this.dialogVisible=true;             this.totalUrl = location.data         }     }, // 保存列宽度         headerDragend(newWidth, oldWidth, column, event) {             const { property } = column             this.columnsList.forEach(r => {                 if (property === r.columns) {                 r.columWidth = newWidth                 }             })             this.getAddTableList()         },          // 保存定制         getAddTableList() {             getAddTableList(this.columnsList, this.tablePath).then((res) => {             });         },         resetAll() {             this.columnsList = deepClone(this.columnsList_copy)         }, 　　 //查询自定义列数据          getQuery() {           let params = {               tablePath: this.tablePath,             }
        getTableList(params).then((res) => {             const { code, data } = res             if (code === 0 && data && data.length > 0) {               let arr = []
              data.forEach(r => {                 this.columnsList_copy.forEach((r1, i1) => {                   if (r1.columns === r.columns) {                     const { columShow, columWidth, ...rest } = r                     arr.push({...rest, ...r1, columShow, columWidth})                   }                 })               })
              // 判断是否有新加的field               this.columnsList_copy.forEach((r1, i1) => {                 if (!data.some(r => r1.columns === r.columns)) {                   arr.push(r1)                 }               })
              this.$nextTick(() => {                 this.columnsList = arr               })             } else {               this.columnsList = deepClone(this.columnsList_copy)             }           });         }, ============================================================================================================================================ BaseCustomColumns ： <template>   <BaseDialog     :title="title"     :visible="visible2"     width="970px"     :slotFooter="true"     @close="close"     @submit="submit"   >     <div class="content cc">       <div class="cc-top">         <draggable           :list="showColumns"           class="list-group group1"           ghost-class="ghost"           chosenClass="chosenClass"           :group="{name: 'group', pull: true, put: true}"           @start="dragging = true"           @end="dragging = false"         >           <div class="cc-item" :class="item.showType == 1 ? 'col1' : 'col2'" v-for="(item, index) in showColumns" :key="item.labels">             <p class="cc-field" title="可拖动进行顺序调整">{{ item.labels }}</p>             <i class="el-icon-close cc-icon" title="隐藏" @click="showField(index, 1)"></i>           </div>         </draggable>       </div>
      <el-divider>拖至上方显示，拖至下方不显示</el-divider>
      <div class="cc-bottem">         <draggable           :list="hiddenColumns"           class="list-group group2"           ghost-class="ghost"           :group="{name: 'group', pull: true, put: true}"           @start="dragging = true"           @end="dragging = false"           :move="onMove"         >           <div class="cc-item" :class="item.showType == 2 ? 'col2' : 'col1'" v-for="(item, index) in hiddenColumns" :key="item.labels">             <p class="cc-field" title="可拖动至上方">{{ item.labels }}</p>             <i class="el-icon-plus cc-icon" title="显示" @click="showField(index, 2)"></i>           </div>         </draggable>       </div>     </div>
    <template v-slot:slotFooter>       <div class="footer">         <el-button @click="close" title="关闭弹窗">取 消</el-button>         <el-button type="primary" plain @click="reset" title="重置当前变更">重 置</el-button>         <el-button type="primary" @click="submit" :loading="loading" title="保存才能生效喔">保 存</el-button>
        <div class="other-footer">           <el-link :underline="false" type="primary" title="列表回到初始状态" @click="resetAll" style="margin-right: 14px;">还原定制</el-link>           <el-link :underline="false" type="primary" title="显示全部字段" @click="addAll">添加全部</el-link>         </div>       </div>     </template>   </BaseDialog> </template>
<script> // 公用的定制栏目 import BaseDialog from '@/components/BaseDialog/index.vue' import draggable from 'vuedraggable' import { deepClone } from '@/utils'; import { getAddTableList, getDeleteTable } from "@/api/fileManagement/routeCode";
export default {   props: {     visible: false,     title: {       type: String,       default: () => '定制栏目'     },     columns: {       type: Array,       default: () => [],     },     columns_copy: {       type: Array,       default: () => [],     },     tablePath: ''   },   data() {     return {       visible2: this.visible,       saveColumns: [],       showColumns: [],       hiddenColumns: [],       loading: false     };   },   components: {BaseDialog, draggable},   watch: {     columns: function() {       this.init()     }   },   created() {     this.init()   },   methods: {     init() {       this.saveColumns = deepClone(this.columns)       this.showColumns = []       this.hiddenColumns = []
      let arr2 = []       this.saveColumns.forEach(r => {         const row = deepClone(r)
        const copy_row = this.columns_copy.find(r1 => r1.columns === r.columns)         if (copy_row) {           row.showType = copy_row.columShow == 'true' ? 1 : 2         }
        if (row.columShow == 'true') {           this.showColumns.push(row)         } else {           arr2.push(row)         }       })
      let arr = [], arr1 = []       arr2.forEach((r, i) => {         if (r.showType == 1) {           arr.push(r)         } else {           arr1.push(r)         }       })
      this.hiddenColumns = [...arr, ...arr1]     },     close() {       this.visible2 = false       this.$emit('close')     },     // 保存     submit() {       // 设置状态       this.changeColumShow()
      const list = [...this.showColumns, ...this.hiddenColumns], arr = []       list.forEach(r => {         if (r.children && r.children.length) {           r.children.forEach(r1 => {             const { prop, columns,  minWidth, columWidth, label, labels } = r1             arr.push({columns: prop || columns, columWidth: minWidth || columWidth, columSort: '1', columShow: 'hidden', labels: label || labels})           })         }       })       getAddTableList(arr.concat(list), this.tablePath).then((res) => {         const {code} = res         if (code === 0) {           this.$message.success("定制成功!");           this.close()           this.$emit('update:columns', list)           this.$emit('submit')         }       });     },     addAll() {       this.showColumns.push(...this.hiddenColumns)       this.hiddenColumns = []     },     reset() {       this.init()     },     // 还原所有     resetAll() {       this.$confirm("此操作将还原定制,是否继续?", "提示", {         confirmButtonText: "确定",         cancelButtonText: "取消",         type: "warning",       })         .then(() => {           getDeleteTable(this.tablePath).then((res) => {             const {code} = res             if (code == 0) {               this.$message.success("还原成功!");               this.$emit('resetAll')               this.close()             }           });         })         .catch((err) => {         });     },     showField(i, type) {       const name = type === 1 ? 'showColumns':'hiddenColumns'       const row = this[name][i]       this[type === 1 ? 'hiddenColumns':'showColumns'][type === 1 ? 'unshift':'push']({...row})       this[name].splice(i, 1)     },     onMove(e) {       if (e.to.className.includes('group2')) return false;       return true     },     changeColumShow() {       this.showColumns.forEach(r => r.columShow = 'true')       this.hiddenColumns.forEach(r => r.columShow = 'false')     }   }, }; </script>
<style scoped lang="scss"> .content {   padding: 0 5px 10px;   text-align: left; } .cc {   min-height: 320px;   .list-group {     display: flex;     flex-wrap: wrap;   }   .cc-item {     display: flex;     align-items: center;     font-size: 14px;     border-radius: 4px;     overflow: hidden;     &:hover {       background-color: var(--current-color);       color: #fff;     }     .cc-field {       padding: 6px 0px 6px 12px;       cursor: grab;       margin: 0;     }     .cc-icon {       padding: 6px 6px 6px 6px;       cursor: pointer;     }   }   .cc-item  {     margin: 0 16px 16px 0;   }
  .col1 {     color: #000;     background-color: #F1EFF3;     &:hover {       .cc-icon {         color: #fff;       }     }     .cc-icon {       color: #4b4b4b;     }   }   .col2 {     border: 1px solid var(--current-color);     color: var(--current-color);     background-color: var(--current-BGColor, #eef3ff);     .cc-field {       padding: 5px 0px 5px 12px;     }     .cc-icon {       padding: 5px 5px 5px 6px;     }   } } .footer {   text-align: center;   display: block;   // padding: 0px 20px 20px;   position: relative;   .other-footer {     position: absolute;     right: 20px;     top: 2px;   } }
.chosenClass {   // }
::v-deep .el-divider {   margin-bottom: 40px; } ::v-deep .el-divider__text {   color: #ccc; } </style>   分列  引用到的插件数据： import BaseDialog from '@/components/BaseDialog/index.vue' import draggable from 'vuedraggable' import { deepClone } from '@/utils'; import { getAddTableList, getDeleteTable } from "@/api/fileManagement/routeCode"; ============================================================================================================= BaseDialog ： <template>   <el-dialog     :title="title"     :visible.sync="visible"     :width="width"     :before-close="handleClose"     :append-to-body="true"     :close-on-click-modal="false"     :destroy-on-close="destroyOnClose"     :modal="modal"     :show-close="showClose"     v-dialogDrag="drag"     ref="dialogRef"   >     <div class="center-box">       <slot></slot>     </div>
    <template v-if="slotFooter">       <slot slot="footer" name="slotFooter"></slot>     </template>     <template v-else>       <span slot="footer" class="dialog-footer" v-if="!hiddenFooter">         <el-button @click="handleClose" v-if="showCancel">{{ cancelText }}</el-button>         <el-button type="primary" @click="submit" :loading="loading" v-if="showConfirm" :disabled="confirmDisabled">{{ confirmText }}</el-button>       </span>     </template>   </el-dialog> </template> <script>
export default {   props: {     visible: false,     title: '',     width: '',     // 是否隐藏footer     hiddenFooter: {       type: Boolean,       default: false     },     destroyOnClose: {       type: Boolean,       default: true     },     // 确定后的loading状态     loading: false,     // 插槽footer，为true得自己配置footer， name为slotFooter     slotFooter: false,     // 是否显示确认     showConfirm: {       type: Boolean,       default: true     },     // 是否显示取消     showCancel: {       type: Boolean,       default: true     },     // 是否显示遮罩层     modal: {       type: Boolean,       default: false     },     // 是否显示右上角x     showClose: {       type: Boolean,       default: true     },     // 默认的取消按钮文本     cancelText: {       type: String,       default: '取 消'     },     // 默认的确定按钮文本     confirmText: {       type: String,       default: '确 定'     },     // 是否拖拽     drag: {       type: Boolean,       default: true     },     // 确定按钮是否禁用     confirmDisabled: {       type: Boolean,       default: false     }   },   data() {     return {     };   },   created(){   },   beforeDestroy() {     this.destory()   },   deactivated() {     this.destory()   },   methods: {     handleClose() {       this.$emit("close");     },     submit() {       this.$emit("submit");     },     destory() {       // 没有no-close类名，才执行关闭事件       if (!this.$refs.dialogRef.$el.classList.contains('no-close')) this.handleClose()     }   }, }; </script>
<style lang="scss" scoped> ::v-deep .el-dialog__footer {   text-align: center;   clear: both; } </style> ============================================================================================= draggable： declare module 'vuedraggable' {   import Vue, { VueConstructor } from 'vue';
  type CombinedVueInstance<     Instance extends Vue,     Data,     Methods,     Computed,     Props   > = Data & Methods & Computed & Props & Instance;
  type ExtendedVue<     Instance extends Vue,     Data,     Methods,     Computed,     Props   > = VueConstructor<     CombinedVueInstance<Instance, Data, Methods, Computed, Props> & Vue   >;
  export type DraggedContext<T> = {     index: number;     futureIndex: number;     element: T;   };
  export type DropContext<T> = {     index: number;     component: Vue;     element: T;   };
  export type Rectangle = {     top: number;     right: number;     bottom: number;     left: number;     width: number;     height: number;   };
  export type MoveEvent<T> = {     originalEvent: DragEvent;     dragged: Element;     draggedContext: DraggedContext<T>;     draggedRect: Rectangle;     related: Element;     relatedContext: DropContext<T>;     relatedRect: Rectangle;     from: Element;     to: Element;     willInsertAfter: boolean;     isTrusted: boolean;   };
  const draggable: ExtendedVue<     Vue,     {},     {},     {},     {       options: any;       list: any[];       value: any[];       noTransitionOnDrag?: boolean;       clone: any;       tag?: string | null;       move: any;       componentData: any;     }   >;
  export default draggable; } ====================================================================== deepClone ： // 深拷贝对象 // https://github.com/JakHuang/form-generator/blob/dev/src/utils/index.js#L107 export function deepClone(obj) {   const _toString = Object.prototype.toString
  // null, undefined, non-object, function   if (!obj || typeof obj !== 'object') {     return obj   }
  // DOM Node   if (obj.nodeType && 'cloneNode' in obj) {     return obj.cloneNode(true)   }
  // Date   if (_toString.call(obj) === '[object Date]') {     return new Date(obj.getTime())   }
  // RegExp   if (_toString.call(obj) === '[object RegExp]') {     const flags = []     if (obj.global) { flags.push('g') }     if (obj.multiline) { flags.push('m') }     if (obj.ignoreCase) { flags.push('i') }
    return new RegExp(obj.source, flags.join(''))   }
  const result = Array.isArray(obj) ? [] : obj.constructor ? new obj.constructor() : {}
  for (const key in obj) {     result[key] = deepClone(obj[key])   }
  return result } ========================================================================== // 创建表格设置 export function getAddTableList(data,tablePath) {   let base64 = encodeURIComponent(tablePath);   return request({     url: admin+'/sys/table/create?tablePath='+base64,     method: 'post',     data   }) }   // 删除表格设置(还原定制) export function getDeleteTable(data) {   return request({     url: admin+'/sys/table/delete',     method: 'post',     data   }) }  ==========================================================================================   tableList 组件页面： <template>     <div class="container table-box">         <u-table                 border                 ref="multipleTable"                 :data="tableData"                 highlight-current-row                 @expand-change="handleclick"                 @selection-change="handleSelectionChange"                 :header-cell-style="{background:'#F2F6FF'}"                 :cell-class-name="tableCellStyleName"                 :row-class-name="tableRowStyleName"                 style="width: 100%"                 v-loading="fullscreenLoading"                 :max-height="centerTableHeight"                 @header-dragend="headerDragend"                 @row-dblclick="handleRowClick"                 class="tableMaxHeightClass"                 v-if="refresh"                 use-virtual                 :row-height="uTableRowHeight"                 >                 <!-- use-virtual  虚拟列表重要控件 -->                 <u-table-column                 type="selection"                 width="44"                 class-name="uIndex"                 show-overflow-tooltip                 align="center"                 fixed="left"                 >                 </u-table-column>                 <u-table-column                 label="序号"                 sortable                 type="index"                 width="44"                 align="center"                 >                 </u-table-column>
                <template v-for="(item, index) in columnsList">                     <u-table-column                       :key="index"                       :min-width="item.columWidth"                       v-if="item.columShow == 'true'"                       :prop="item.columns"                       :label="item.labels"                       :formatter="item.formatter"                       show-overflow-tooltip                       sortable                     >                       <template slot-scope="scoped">                         <template v-if="item.columns === 'applyNo'">                             <!-- <el-link @click.native="handleOpenDetial(scoped.row.crmSalesLeadsId,scoped.row)" class="getColor" :underline="false">{{ scoped.row.leadsName}}</el-link> -->                             <span type="primary" @click="handleApplyNo(scoped.row)" style="color:#5231FF;cursor: pointer;" class="textDecoration">{{scoped.row.applyNo}}</span>                         </template>                         <template v-else-if="item.columns === 'arapNo'">                             <span type="primary" @click="handlearapNo(scoped.row)" style="color:#5231FF;cursor: pointer;" class="textDecoration">{{scoped.row.arapNo}}</span>                         </template>                         <template v-else-if="item.columns === 'applyAmount'">                             <el-link :underline="false" style="float:right; font-weight: normal; white-space:nowrap; text-overflow:ellipsis;text-align: right; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;overflow:hidden; display: inline-block;">{{scoped.row.applyAmount}}</el-link>                         </template>                         <template v-else-if="item.columns === 'amtStl'">                             <el-link :underline="false" style="float:right;white-space:nowrap;font-weight: normal;text-align: right; text-overflow:ellipsis; -o-text-overflow: ellipsis; -ms-text-overflow: ellipsis;overflow:hidden; display: inline-block; width: 120px;">{{scoped.row.amtStl}}</el-link>                         </template >                         <template v-else-if="item.columns === 'apStatus'">                             <span v-if="scoped.row.apStatus=='未付款'" class="warnningStatus">{{scoped.row.apStatus}}</span>                             <span v-else class="succesStatus">{{scoped.row.apStatus}}</span>                         </template>                         <template v-else-if="item.columns === 'arStatus'">                             <span v-if="scoped.row.arStatus=='未收款'" class="warnningStatus">{{scoped.row.arStatus}}</span>                             <span v-else-if="scoped.row.arStatus=='部分收款'" class="partStatus">{{scoped.row.arStatus}}</span>                             <span v-else class="succesStatus">{{scoped.row.arStatus}}</span>                         </template>                         <template v-else-if="item.columns === 'checkerStatus'">                             <span v-if="scoped.row.checkerStatus=='未审核'" class="warnningStatus" >{{scoped.row.checkerStatus}}</span>                             <span v-else class="succesStatus">{{scoped.row.checkerStatus}}</span>                         </template>                         <template v-else>                           {{scoped.row[item.columns]}}                         </template>                       </template>                     </u-table-column>                   </template>                   <u-table-column                         v-if="panymentAuditInfo==1"                         prop="name"                         label="操作"                         width="120"                         align="center"                         fixed="right"                         >                         <template slot-scope="{row,$index}">                             <div style="white-space:nowrap">                                 <el-link type="primary" @click="checkStatus(row,$index)"  >审核</el-link>                                 <el-link type="primary" @click="handldeRow(row,$index)" >预览</el-link>                                 <el-link type="danger" @click="handleDelete(row,$index)" >删除</el-link>                             </div>                         </template>                     </u-table-column>                     <u-table-column                         v-else                         prop="name"                         label="操作"                         width="120"                         align="center"                         fixed="right">                         <template slot-scope="{row,$index}">                             <div style="white-space:nowrap">                                 <el-link type="primary" @click="handldeRow(row,$index)" >预览</el-link>                                 <el-link type="danger" @click="handleDelete(row,$index)" >删除</el-link>                             </div>                         </template>                     </u-table-column>                 </u-table>                 <pagination class="pagination"                     v-show="total > 0"                     :total="total"                     :page.sync="paramsQuery.pageNo"                     :limit.sync="paramsQuery.pageSize"                     @pagination="fclfeequeryPages"                     @size-change="handleSizeChange"                     @current-change="handlePageChange"                 />     </div> </template> <script> import {fclfeequeryPage,fclfeequerytrend,getEditByPriceId} from "@/api/freightrates/index" import tableConfigMixins from "@/views/mixin/tableConfigMixins"; import {queryPaymentAuditListPage,auditPayment,delPayment} from "@/api/settleAccounts/payment"; import {paymentpage} from "@/api/fileManagement/goods"; import {getReportUrlByType} from "@/api/freightrates/index"; import tableMixins from "./../receivePayment/tableMixins" import {   getAddTableList } from "@/api/fileManagement/routeCode"; export default {     props: {       columnsList: {         type: Array,         default: () => []       }     },     data(){         return{             panymentAuditInfo:"0",             excelList:[],//勾选云加单的id集合             fullscreenLoading: false,             selectquato:[],             tableData:[],             uTableRowHeight:30,             total: 0,             selectInfoList:[],             paramsQuery:{                 pageNo:1,                 pageSize:30,                 dateType: "2",                 applyNo:"",                 oldApplyNo:"",                 arapNo:"",                 apStatus:"",                 customerId:"",                 customerNameEn:"",                 nos:"",                 endDate:"",                 beginDate:"",                 auditStatus:"",             },             selectList:[],             priceNameList:[],             showtime:[],             refresh: true,             tablePath: '/settleAccounts/payment',             checkIds:[],             multipleSelection:[],             otherHeight: 80,         }     },     watch: {       columnsList: function() {         this.refresh = false         this.$nextTick(() => {           this.refresh = true         })       },         tableData: function(o) {             if (o.length) {                 this.$nextTick(() => {                     this.uTableRowHeight = document.querySelectorAll('.uIndex')?.[1]?.getBoundingClientRect()?.height || 30                 })             }         },     },     mixins: [ tableMixins ],     created(){         // this.fclfeequeryPages();
        if(this.$route.name.includes('Panymentaudit')){             this.panymentAuditInfo=1;         }         this.getUserPageList();     },     methods:{         async getUserPageList(){             let params={                 pageNo:this.paramsQuery.pageNo,                 pageSize:this.paramsQuery.pageSize,             }             this.fullscreenLoading = true;             if(this.panymentAuditInfo==1){                 this.location = await queryPaymentAuditListPage(params);             }else{                 this.location = await paymentpage(params);             }                 if(this.location.code==0){                     this.tableData = this.location.data.list;                     this.total = this.location.data.total || 0;                     this.fullscreenLoading = false;
            }         },         fclfeequeryPages(){             this.$emit("handleParamsQuery");         },         async getParamsData(value){             this.fullscreenLoading = true;             let params = {                 pageNo:this.paramsQuery.pageNo,                 pageSize:this.paramsQuery.pageSize,                 dateType: this.paramsQuery.dateType||value.dateType?value.dateType:"",                 applyNo:this.paramsQuery.applyNo||value.applyNo?value.applyNo:"",                 oldApplyNo:this.paramsQuery.oldApplyNo||value.oldApplyNo?value.oldApplyNo:"",                 arapNo:this.paramsQuery.arapNo||value.arapNo?value.arapNo:"",                 apStatus:this.paramsQuery.apStatus||(value.apStatus>0 ||value.apStatus ==0)?value.apStatus:"",                 customerId:this.paramsQuery.customerId||value.customerId?value.customerId:"",                 customerNameEn:this.paramsQuery.customerNameEn||value.customerNameEn?value.customerNameEn:"",                 nos:this.paramsQuery.nos||value.nos?value.nos:"",                 endDate:this.paramsQuery.endDate||value.selectValue?value.selectValue[1]:"",                 beginDate:this.paramsQuery.beginDate||value.selectValue?value.selectValue[0]:"",                 auditStatus:this.paramsQuery.auditStatus||(value.auditStatus>0 ||value.auditStatus ==0)?value.auditStatus:"",             }             if(this.panymentAuditInfo==1){                 this.location = await queryPaymentAuditListPage(params);             }else{                 this.location = await paymentpage(params);             }             if( this.location.code==0){                 this.tableData =  this.location.data.list;                 this.total =  this.location.data.total || 0;                 this.fullscreenLoading = false;             }         },         // 获取表格页码         pageInfo(){             let params={                 pageNo:this.paramsQuery.pageNo,                 pageSize:this.paramsQuery.pageSize             }             this.$emit("handleaPage",params);         },         handleclick(){
        },         // 勾选         async handleSelectionChange(val){             this.multipleSelection = val;             this.selectquato = val.map((item)=>item.tranPaymentId);             this.selectInfoList=val;             let params={                 ids:this.selectquato,                 list:this.selectInfoList             }             this.$emit("handleSelect",params);         },         // 样式         tableCellStyleName(row, column, rowIndex, columnIndex){         },         tableRowStyleName(row){             if(this.multipleSelection){                 const list=  this.multipleSelection.find(item => item.tranPaymentId == row.row.tranPaymentId)                 if(list){                     return "select-row"                 }             }                 // const isSelect = this.selectList.some(r => r === row.row.crmSalesLeadsId)                 // let otherClass = ''                 // if (isSelect) otherClass = 'select-row'
                // if(row.row.less ==false){                 //     return "rowStyleName " + otherClass;                 // } else {                 //   return otherClass                 // }         },         refashTableData(){             this.fclfeequeryPages();         },
        handlePageChange(currentPage) {             this.paramsQuery.pageNo = currentPage;             // 在此刷新数据             },         handleSizeChange(pageSize) {             this.paramsQuery.pageSize = pageSize;             // 在此刷新数据         },         async searchData(e){             let location = await  fclfeequeryPage(e);             if(location.code==0){                 this.tableData = location.data.list;                 this.total = location.data.total || 0;             }         },         async resetData(e){             let location = await  fclfeequeryPage(e);             if(location.code==0){                 this.tableData = location.data.list;                 this.total = location.data.total || 0;             }         },         // 保存列宽度         headerDragend(newWidth, oldWidth, column, event) {             const { property } = column             this.columnsList.forEach(r => {                 if (property === r.columns) {                 r.columWidth = newWidth                 }             })             this.getAddTableList()         },         // 保存定制         getAddTableList() {             getAddTableList(this.columnsList, this.tablePath).then((res) => {             });         },         resetAll() {             this.columnsList = deepClone(this.columnsList_copy)         },         // 转移按钮获取勾选数据         selectTableList(val){             let params={                 val:val,                 data:this.selectquato,
            }             this.$emit("handleSelectListId",params)         },         // 点击表格 付款申请单号         handleApplyNo(row){             if(this.$route.name.includes('Panymentaudit')){                 this.$router.push({                     path:`/settleAccounts/paymentDetial/${row.applyNo}`,                     query: {                         tranPaymentId:row.tranPaymentId,                         applyNo:row.applyNo,                         editType:"edit",
                    }                 })            }else{                 this.$router.push({                     path:`/settleAccounts/paymentDetial/${row.applyNo}`,                     query: {                         tranPaymentId:row.tranPaymentId,                         editType:"edit",                         showInfo:true,                         from:"free"                         // paymentCorpName:row.nameCn,                         // paymentCorpId:row.paymentCorpId,
                    }                 })            }         },         // 行双击         handleRowClick(row){             this.$router.push({                 path:`/settleAccounts/paymentDetial/${row.applyNo}`,                 query: {                     tranPaymentId:row.tranPaymentId,                     editType: 'edit',                     showInfo:true,                     from:"free"                     // paymentCorpName:row.nameCn,                     // paymentCorpId:row.paymentCorpId                 }             })         },         handlearapNo(e){           this.$router.push({               path:`/settleAccounts/receivePaymentDetail/${e.arapNo}`,               query: {                 tranCollectionPaymentId:e.tranCollectionPaymentId,                 customerName:e.clientName,                 type:"edit",                 customerId:e.clientId               }           })         },         // 行付款申请         checkStatus(row){             this.checkIds=[];             this.checkIds.push(row.tranPaymentId);             if(row.auditStatus==1){                 this.$message.warning("付款申请已审核成功!");                 return false             }             let params={                 auditStatus:1,                 paymentIds: this.checkIds             }             // this.handleChecked = true;             auditPayment(params).then((location)=>{                 if(location.code==0){                     this.$message.success("付款申请审核成功!");                     this.fclfeequeryPages();                 }             }).catch((err)=>{             });;
        },             // 行 预览         async handldeRow(row){             if(!row.openReportId){                 this.$message.warning("请去详情选择格式!");                 return false             }             this.$emit("handleRowSee", row);         },         // 行删除         handleDelete(row){             this.$confirm('删除该数据, 是否继续?', '提示', {                 confirmButtonText: '确定',                 cancelButtonText: '取消',                 type: 'warning'             })             let params={                 ids:row.tranPaymentId,             }             this.$confirm('确认删除？')                 .then(_ => {                     delPayment(params).then((res)=>{                         if(res.code==0){                             this.$message.success("删除成功!");                             this.fclfeequeryPages();                         }                     });                 }).catch(_ => {
            })         },     } } </script> <style scoped lang="scss">     .getColor{         color:#5231FF !important;         font-weight: normal;         &:hover{            text-decoration: underline #5231FF;         }     }     .container{width: 100% !important; margin: auto 0 !important;     }     .tableMaxHeightClass{ margin-bottom: 19px;         ::v-deep .uIndex{             .el-tooltip{                 width: 44px !important;                 min-width: 44px !important;             }         }     } ::v-deep .pagination-container .el-pagination {   bottom: -1px;   right: 19px; } ::v-deep .el-table--medium .el-table__cell{     padding: 0; } .list{     ::v-deep .iconfont{         font-size: 24px;     }     ::v-deep .icon-tubiao{         color:#6288FF;     } } ::v-deep .el-tooltip{     p{padding: 0; margin: 0;} } ::v-deep .baseprice{ background-color: #ff5400 !important;} ::v-deep .el-dialog__header{             padding:20px 0px 10px 0px;             border-bottom:1px solid #C3D1FF;             margin: 0 20px;         } ::v-deep .rowStyleName{     td{       div{         color:#ccc !important;       }       &:nth-of-type(1){         div{             color: #000 !important;         }       }       &:nth-of-type(2){         div{             color: #000 !important;         }       }     }
} ::v-deep .cellStyleName{background:#F3FFFE;} ::v-deep .cellStyleTotalName{  background:#FFF3F3;} ::v-deep .succesStatus{color: #65A304;} ::v-deep .warnningStatus {color: #F20000;} ::v-deep .partStatus{color: #F9B548 ;}
::v-deep .selectRowName{ background-color: var(--current-BGColor2 ) !important;} </style> ================================================================================  tableMixins.js 页面 import { debounce } from 'throttle-debounce' export default {   data() {     return {       centerTableHeight: '400',       otherHeight: 0     };   },   created() {   },   mounted() {     this.setTableHeight()
    window.onresize = debounce(200, () => {       this.setTableHeight()     })   },   methods: {     setTableHeight() {
      this.$nextTick(() => {         setTimeout(() => {           if (document.querySelector('.settleAccounts-warp .table-box .el-table')) {             const { height: bodyH } = document.body.getBoundingClientRect()             const { height: navH } = document.querySelector('.nav-wrapper').getBoundingClientRect()             const { height: centerSearchH } = document.querySelector('.settleAccounts-warp .footerTable .search-box')?.getBoundingClientRect() || {}             const { height: centerPaginationH } = document.querySelector('.settleAccounts-warp .footerTable .pagination')?.getBoundingClientRect() || {}             const { height: topH } = document.querySelector('.settleAccounts-warp .collapse')?.getBoundingClientRect() || {}
            // 实际能使用的总高度             const mainH = bodyH - navH - 20/*每模块的margin总和*/ - (topH || 361)/*top模块的固定高度*/ - (centerSearchH + centerPaginationH + 40)/*center模块的固定高度*/ - this.otherHeight/*其他高度*/
            // center的table高度 最小高度200             const footerH = mainH < 200 ? 200 : mainH             document.querySelector('.settleAccounts-warp .table-box .el-table').style.maxHeight = `${footerH}px`             this.centerTableHeight = footerH           }         },500)       })     }   }, };  

标签：el,const,data,value,---,params,table,type,row
From： https://www.cnblogs.com/rockyjs/p/17934940.html