element-ui table表格+分页器封装

淩亂°似流年 2023-02-11 08:45 36阅读 0赞

表格组件代码：Table.vue

  1. <!--表格组件 -->
  2. <template>
  3. <section class="ces-table-page">
  4.   <!-- 表格操作按钮 -->
  5.     <section class="ces-handle" v-if='isHandle'>
  6.       <el-button v-for='item in tableHandles' :size="item.size || size" :type="item.type" :icon='item.icon' @click="item.handle()">{ { item.label}}</el-button>
  7.     </section>
  8.     <!-- 数据表格 -->
  9.     <section class="ces-table">
  10.         <el-table  :data='tableData' :size='size' height="100%" 
  11.           :border  ='isBorder'
  12.           @select='select' 
  13.           @select-all='selectAll'
  14.           v-loading='loading' 
  15.           :defaultSelections='defaultSelections'
  16.           ref="cesTable">
  17.             <el-table-column v-if="isSelection" type="selection" align="center" ></el-table-column>
  18.             <el-table-column v-if="isIndex" type="index" :label="indexLabel" align="center" width="50"></el-table-column>
  19.             <!-- 数据栏 -->
  20.             <el-table-column v-for="item in tableCols" 
  21.               :key="item.id"
  22.               :prop="item.prop" 
  23.               :label="item.label" 
  24.               :width="item.width"
  25.               :align="item.align" 
  26.               :render-header="item.require?renderHeader:null"
  27.               >
  28.                 <template slot-scope="scope" >
  29.                   <!-- html -->
  30.                   <span v-if="item.type==='Html'" v-html="item.html(scope.row)"></span>
  31.                   <!-- 按钮 -->
  32.                   <span v-if="item.type==='Button'" >
  33.                     <el-button v-for="btn in item.btnList" 
  34.                       v-if="!btn.isShow || (btn.isShow && btn.isShow(scope.row))"
  35.                       :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
  36.                       :type="btn.type" 
  37.                       :size="btn.size || size" 
  38.                       :icon="btn.icon" 
  39.                       @click="btn.handle(scope.row)">{ { btn.label}}</el-button>
  40.                     </span>
  41.                   <!-- 输入框 -->
  42.                   <el-input v-if="item.type==='Input'" v-model="scope.row[item.prop]" :size="size" 
  43.                     :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
  44.                     @focus="item.focus && item.focus(scope.row)"></el-input>
  45.                   <!-- 下拉框 -->
  46.                   <el-select v-if="item.type==='Select'" v-model="scope.row[item.prop]" :size="size" :props="item.props"
  47.                     :disabled="btn.isDisabled && btn.isDisabled(scope.row)" 
  48.                     @change='item.change && item.change(scope.row)'>
  49.                       <el-option v-for="op in item.options" :label="op[item.props.label]" :value="op[item.props.value]" :key="op[item.props.value]"></el-option>
  50.                   </el-select>
  51.                   <!-- 单选 -->
  52.                   <el-radio-group v-if="item.type==='Radio'" v-model="scope.row[item.prop]"
  53.                     :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
  54.                     @change='item.change && item.change(scope.row)'>
  55.                       <el-radio v-for="ra in item.radios" :label="ra.value">{ { ra.label}}</el-radio>
  56.                   </el-radio-group>
  57.                   <!-- 复选框 -->
  58.                   <el-checkbox-group v-if="item.type==='Checkbox'" v-model="scope.row[item.prop]" 
  59.                     :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
  60.                     @change='item.change && item.change(scope.row)'>
  61.                       <el-checkbox v-for="ra in item.checkboxs" :label="ra.value">{ { ra.label}}</el-checkbox>
  62.                   </el-checkbox-group>
  63.                   <!-- 评价 -->
  64.                   <el-rate v-if="item.type==='Rate'" v-model="scope.row[item.prop]"
  65.                     :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
  66.                     @change='item.change && item.change(scope.row)'></el-rate>
  67.                   <!-- 开关 -->
  68.                   <el-switch v-if="item.type==='Switch'" v-model="scope.row[item.prop]"
  69.                     :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
  70.                     @change='item.change && item.change(scope.row)'></el-switch>
  71.                   <!-- 图像 -->
  72.                   <img v-if="item.type==='Image'" :src="scope.row[item.prop]" @click="item.handle && item.handle(scope.row)"/>
  73.                   <!-- 滑块 -->
  74.                   <el-slider v-if="item.type==='Slider'" v-model="scope.row[item.prop]" 
  75.                   :disabled="btn.isDisabled && btn.isDisabled(scope.row)"
  76.                     @change='item.change && item.change(scope.row)'></el-slider>
  77.                   <!-- 默认 -->
  78.                   <span v-if="!item.type" 
  79.                     :style="item.itemStyle && item.itemStyle(scope.row)" 
  80.                     :class="item.itemClass && item.item.itemClass(scope.row)">{ { (item.formatter && item.formatter(scope.row)) || scope.row[item.prop]}}</span>
  81.                 </template>
  82.               </el-table-column>
  83.         </el-table>
  84.     </section>
  85.     <!-- 分页 -->
  86.     <section class="ces-pagination"  v-if='isPagination'>
  87.         <el-pagination style='display: flex;justify-content: center;height: 100%;align-items: center;'
  88.             @current-change="handleCurrentChange"
  89.             @size-change="handleSizeChange"
  90.             layout="total,sizes ,prev, pager, next,jumper"
  91.             :page-size="pagination.pageSize"
  92.             :current-page="pagination.pageNum"
  93.             :total="pagination.total"
  94.         ></el-pagination>
  95.     </section>
  96. </section>
  97. </template>
  99. <script>
  101. export default { 
  102.   props:{ 
  103.     // 表格型号：mini,medium,small
  104.     size:{ type:String,default:'medium'},
  105.     isBorder:{ type:Boolean,default:true},
  106.     loading:{ type:Boolean,default:false},
  107.     // 表格操作
  108.     isHandle:{ type:Boolean,default:false},
  109.     tableHandles:{ type:Array,default:()=>[]},
  110.     // 表格数据
  111.     tableData:{  type:Array,default:()=>[]},
  112.     // 表格列配置
  113.     tableCols:{  type:Array,default:()=>[]},
  114.     // 是否显示表格复选框
  115.     isSelection:{ type:Boolean,default:false},
  116.     defaultSelections:{  type:[Array,Object], default:()=>null},
  117.     // 是否显示表格索引
  118.     isIndex:{ type:Boolean,default:false},
  119.     indexLabel: { type:String,default:'序号'},
  120.     // 是否显示分页
  121.     isPagination:{ type:Boolean,default:true},
  122.     // 分页数据
  123.     pagination:{  type:Object,default:()=>({ pageSize:10,pageNum:1,total:0})},
  125.   },
  126.   data(){ 
  127.     return { 
  128.     }
  129.   },
  130.   watch:{ 
  131.     'defaultSelections'(val) { 
  132.         this.$nextTick(function(){ 
  133.           if(Array.isArray(val)){ 
  134.             val.forEach(row=>{ 
  135.               this.$refs.cesTable.toggleRowSelection(row)
  136.             })
  137.           }else{ 
  138.             this.$refs.cesTable.toggleRowSelection(val)
  139.           }
  140.         })      
  141.     }
  142.   },
  143.   methods:{ 
  144.     // 表格勾选
  145.     select(rows,row){ 
  146.       this.$emit('select',rows,row);
  147.     },
  148.     // 全选
  149.     selectAll(rows){ 
  150.       this.$emit('select',rows)
  151.     },
  152.     // 
  153.     handleCurrentChange(val){ 
  154.       this.pagination.pageNum = val;
  155.       this.$emit('refresh');
  156.     },
  157.     handleSizeChange(val) { 
  158.       this.pagination.pageSize = val;
  159.       this.$emit('refresh');
  160.     },
  162.     // tableRowClassName({ rowIndex}) { 
  163.     //     if (rowIndex % 2 === 0) { 
  164.     //         return "stripe-row";
  165.     //     }
  166.     //     return "";
  167.     // }
  168.     renderHeader(h,obj) { 
  169.       return h('span',{ class:'ces-table-require'},obj.column.label)
  170.     },
  171.   },
  172. }
  173. </script>
  174. <style>
  175. .ces-table-require::before{ 
  176.   content:'*';
  177.   color:red;
  178. }
  179. </style>

页面调用和搜索框组件同用:

  1. <template>
  2.   <div class="ces-main">
  3.     <search-form 
  4.       size='mini'
  5.       labelWidth = '80px' 
  6.       :searchData = "searchData"
  7.       :searchForm = "searchForm"
  8.       :searchHandle="searchHandle"></search-form>
  9.     <ces-table 
  10.       size='mini'
  11.       :isSelection='true'
  12.       :isIndex='true'
  13.       :isPagination='true'
  14.       :isHandle='true'
  15.       :tableData='tableData' 
  16.       :tableCols='tableCols' 
  17.       :tableHandles='tableHandles'
  18.       :pagination='pagination'
  19.       >
  20.       </ces-table>
  21.   </div>
  22. </template>
  24. <script>
  25. import SearchForm from '@/components/common/Form/searchForm'
  26. import cesTable from '@/components/common/Table/Table'
  27. export default { 
  28.   data () { 
  30.     let sexs=[{ label:'男',value:'M'},{ label:'女',value:'F'}]
  31.     let sexProps={ label:'label',value:'value'}
  32.     let intersts=[{ label:'羽毛球',value:'badminton'},{ label:'篮球',value:'basketball'}]
  33.     let interstProps={ label:'label',value:'value'}
  34.     return { 
  35. // 查询表单
  36.       searchData:{ 
  37.         name:null,
  38.         age:null,
  39.         sex:null,
  40.         interst:null
  41.       },
  42.       searchForm:[
  43.         { type:'Input',label:'姓名',prop:'name',width:'180px',placeholder:'请输入姓名...'},
  44.         { type:'Input',label:'年龄',prop:'age',width:'180px',placeholder:'请输入年龄...'},
  45.         { type:'Select',label:'性别',prop:'sex',width:'180px',options:sexs,props:sexProps,change:row=>'',placeholder:'请选择性别...'},
  46.         { type:'Checkbox',label:'爱好',width:'180px',prop:'interst',checkboxs:intersts,props:interstProps}
  47.       ],
  48.       searchHandle:[
  49.         { label:'查询',type:'primary',handle:()=>''},
  50.         { label:'重置',type:'primary',handle:()=>''}
  51.       ],
  53. // 表格
  54.       tableData:[
  55.         { name:'张三',age:'12',sex:'男',interst:'女'},
  56.         { name:'筱华',age:'27',sex:'女',interst:'羽毛球'},
  57.         { name:'张三',age:'12',sex:'男',interst:'女'},
  58.         { name:'筱华',age:'27',sex:'女',interst:'羽毛球'},
  59.         { name:'筱华',age:'27',sex:'女',interst:'羽毛球'},
  60.         { name:'筱华',age:'27',sex:'女',interst:'羽毛球'},
  61.         { name:'筱华',age:'27',sex:'女',interst:'羽毛球'}
  63.       ],
  64.       tableCols:[
  65.         { label:'姓名',prop:'name'},
  66.         { label:'年龄',prop:'age'},
  67.         { label:'性别',prop:'sex'},
  68.         { label:'爱好',prop:'interst'},
  69.         { label:'操作',type:'Button',btnList:[
  70.           { type:'primary',label:'编辑',handle:row=>''},
  71.           { type:'danger',label:'删除',handle:row=>''}
  72.         ]}
  73.       ],
  74.       tableHandles:[
  75.         { label:'新增',type:'primary',handle:row=>''}
  76.       ],
  77.       pagination:{ 
  78.         pageSize:10,
  79.         pageNum:1,
  80.         total:7
  81.       }
  82.     }
  83.   },
  84.   components:{ 
  85.     cesTable,
  86.     SearchForm
  87.   }
  88. }
  89. </script>
  91. <style>
  93. </style>

发表评论

表情：
评论列表 （有 0 条评论，36人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ElementUI 分页

    一、概述 当我们向后台请求大量数据的时候，并要在页面展示出来，请求的数据可能上百条数据或者更多的时候，并不想在一个页面展示，这就需要使用分页功能来去完成了。 本次所使用

    谁借莪１个温暖的怀抱￠谁借莪１个温暖的怀抱￠/ 0 赞/ 272 阅读