vue2+element table组件封装

vue2+element table组件封装

1、数据不分页，前端处理分页
1.1、组件代码

<!-- 表格 不分页 -->
<template>
    <div>
        <el-table
            ref="multipleTable"
            :data="showPage ? tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize) : tableData"
            class="tableStyle"
            max-height="310"
            align="center"
            tooltip-effect="dark"
            v-loading="loading"
            :header-cell-="{'text-align':'center'}"
            @selection-change="selectionChange"
            @row-click="clickRow"
            :row-key="getRowKeys"
            :row-class-name="tableRowClassName"
            :highlight-current-row="selectType!='multiple'"
        >
            <el-table-column v-if="selectType!='multiple' && selectType !='none'" min-width="40" align="center" fixed>
                <template slot-scope="scope">
                    <el-radio v-model="currentRow" :label="scope.row"
                        @click.native.stop.prevent="clickRow(scope.row)">{{""}}</el-radio>
                </template>
            </el-table-column>
            <el-table-column v-if="selectType=='multiple'"
                fixed
                width="55"
                align="center"
                :reserve-selection="true"
                 :selectable="isRowSelectable"
                type="selection"
            >
            </el-table-column>
            <el-table-column type="index" label="序号" width="70" align="center" fixed>
                <template slot-scope="scope">
                    {{(pageNum-1)* pageSize+scope.$index+1}}
                </template>
            </el-table-column>

            <template v-for="item in columns">
                
                <el-table-column v-if="item.scopedSlots ?(item.isShow == false ? false : true) : false"
                  :show-overflow-tooltip="item.tooltip ? true : (item.tooltip == false ? false : true) " 
                  :key="item.key" :prop="item.dataIndex" 
                  :label="item.title" :width="item.maxWidth ? item.maxWidth : undefined" 
                  :min-width="item.maxWidth ? undefined :(item.width ? item.width:200)" 
                  align="center" :fixed="item.isFixed">
                    <template slot-scope="scope">
                        <slot :name="item.scopedSlots.render" v-bind="scope"></slot>
                    </template>
                </el-table-column>
                <el-table-column v-else-if="item.isShow == false ? false : true" 
                  show-overflow-tooltip 
                  :key="item.key" :prop="item.dataIndex" 
                  :label="item.title" :fixed="item.isFixed"
                  :width="item.maxWidth ? item.maxWidth : undefined" 
                  :min-width="item.maxWidth ? undefined :(item.width ? item.width:200)" 
                  align="center">
                </el-table-column>
            </template>
            <slot name="operate"></slot>
        </el-table>  
        <pagination
            v-show="total > 0 && showPage"
            :total="total"
            :page.sync="pageNum"
            :limit.sync="pageSize"
        />    
    </div>
</template>
<script>
export default {
    // tableData 数据
    // columns表格列
    // props:['tableData','columns',],
    props: {
        tableData: {
            type: Array,
            default: [],
        },
        /* 高度 */
        columns: {
            type: Array,
            default: [],
        },
        loading: {
            type: Boolean,
            default: false,
        },
        showPage: {
            type: Boolean,
            default: true,
        },
        selectType:{
            type: String,
            default: '',
        },
        // 多选时唯一值， 必填
        rowKey:{
            type: String,
            default: 'id',
        },
        // 控制多选框是否可选
        isRowSelectable: {
            type: Function,
            default: () => {
              return true
            },
        }
    },
    data(){
        return{
            currentRow:null,  //单选选中数据
            pageNum: 1,     //页码
            pageSize: 10,   //每页数据
            total: this.tableData.length,        //总条数
        }
    },
    beforeUpdate(){
        this.total = this.tableData.length;
    },
    methods:{
        getRowKeys(row) {
            return row[this.rowKey];
        },
        // 请求表格数据
        getTableData(){
            
        },
        // 多选
		    selectionChange(selection) {
            this.$emit("propCurrentRowList",selection)
		    },
        // 表格单选事件
        clickRow(row, event, column){
            // if(JSON.stringify(this.currentRow) == JSON.stringify(row)){
            //     this.$refs.multipleTable.setCurrentRow();
            //     this.currentRow = undefined;
            //     this.$emit("propCurrentRow",null)
            // }else {
            //     this.currentRow = row;
            //     this.$emit("propCurrentRow",row)
            //     this.$refs.multipleTable.setCurrentRow(this.currentRow, true);
            // }
            this.currentRow = row;
            this.$emit("propCurrentRow",row)
        },
        // 选择回调
        toggleRowSelection(val, flag){
          this.$refs.multipleTable.toggleRowSelection(val, flag);
        },
    }
}
</script>

1.2、组件调用

      List: [],  // 
      Columns: [
        {key:'name',dataIndex:'name',title:'名称', width:'250', maxWidth: '250'},
        {key:'mode',dataIndex:'mode',title:'类型', width:'120', scopedSlots:{render:"mode"}},
      ],

2、后端分页
2.1、组件代码

<template>
  <div>
    <!-- 实时支付列表 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      class="tableStyle"
      :height="height"
      align="center"
      v-loading="loading"
      tooltip-effect="dark"
      :header-cell-="{ 'text-align': 'center' }"
      highlight-current-row
      @current-change="clickRow"
    >
      <el-table-column min-width="55" align="center">
        <template slot-scope="scope">
          <el-radio v-model="currentRow" :label="scope.row">{{ "" }}</el-radio>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        align="center"
      ></el-table-column>

      <template v-for="item in columns">

        <el-table-column
          v-if="item.scopedSlots ? true : false"
          show-overflow-tooltip
          :key="item.key"
          :prop="item.dataIndex"
          :label="item.title"
          :min-width="item.width > 0 ? item.width : 200"
          align="center"
        >
        <template slot-scope="scope">
            <slot :name="item.scopedSlots.render" v-bind="scope"></slot>
        </template>
        </el-table-column>
        <el-table-column
          v-else
          show-overflow-tooltip
          :key="item.key"
          :prop="item.dataIndex"
          :label="item.title"
          :min-width="item.width > 0 ? item.width : 200"
          align="center"
        >
        </el-table-column>
        
      </template>
      
      <slot name="operate"></slot>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="pageNum"
      :limit.sync="pageSize"
      @pagination="getTableData"
    />
  </div>
</template>
<script>
export default {
  props:{
    // 参数
    params:{
      type:Object,
      default:''
    },
    // 接口
    request:{
      type:Object,
      default:''
    },
    columns: {
      type:Array,
      default:''
    },
    height: {
      type:String,
      default: '310'
    },
  },
  data() {
    return {
      currentRow: null,
      loading: false,
      pageNum: 1,
      pageSize: 10,
      tableData: [],
      total: 0,
    };
  },
  methods: {
    getTableData() {
      this.loading = true;
      console.log(this.params, "this.params");
      this.request(this.params, this.pageNum, this.pageSize)
        .then((res) => {
          this.loading = false;
          if (res.code == this.axiosCode.axiosSuccess) {
            let data = res.data.transResponse.outInfos;
            this.tableData = data.rows;
            this.total = data.total;
          } else {
            this.tableData = [];
            this.total = 0;
            return this.msgError(res.msg);
          }
        })
        .catch((e) => {
          console.log(e);
          this.loading = false;
        });
    },
    clickRow(val) {
      this.currentRow = val;
      this.$emit("propCurrentRow", val);
    },
  },
};
</script>