element 封装table加分页、单选、多选下拉等

table封装加分页，新建一个table.vue 文件：

用法：1、在相应页面引入table.vue文件，并调用

	<template>
		<div>
 			<single-table
                :data="pageResult"
                :columns="columns"
                :handleWidth="90"
                ref="mytable"
                v-loading="loading"
                @findPage="findPage"
                :setPageNow="setPageNow">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="detailsView(scope)">查看详情</el-button>
                </template>
            </single-table> 
        <div> 
   <template>
   <javascript>
   import singleTable from "@/components/Base/table"
   export default {
    
    
   	    components:{
    
    
        	singleTable,
    	},
    	data(){
    
    
        	return {
    
    
	        	 loading:false,
	        	 //分页需要传，防止切换tabs时，分页页数错乱
	            setPageNow:false, 
	              //后台返回的值，注意：由于组件上写了content字段，所以返回的数组要放在里面，或者组件删除content
	            pageResult:{
    
    }, 
	            //列表的展示      		
	             columns:[
	                {
    
     prop: "code", label: "交付单编号", minWidth: 80, sortable: false },
	                {
    
     prop: "amount", label: "金额(元)", minWidth: 80 ,formatter:this.setAmount}, 
	                {
    
     prop: "businessDate", label: "交付日期", minWidth: 60 },
	            ],
	            //分页
	            pageRequest:{
    
    
		            pageNow: 1,
	            	pageSize: 20
            	},
            	//后台需要的参数
            	formInline:{
    
    
	            	aa:'',
	            	bb:''
            	}
        	}
        },
        mounted(){
    
    
        	this.findPage(null)
        },
        methods:{
    
    
         setAmount(row, column){
    
    
          return  this.amountRule(row.amount)
        },
          findPage(data) {
    
    
		      this.loading = true;
		      if (data !== null) {
    
    
		        this.pageRequest = data.pageRequest;
		      } else {
    
    
		        this.setPageNow = !this.setPageNow;
		      }
	
		      this.pageRequest.params = this.formInline;
		      this.$api.credit.financeCreditList(this.pageRequest).then(res => {
    
      //自己封装的接口形式，可自行更换
		        const {
    
     statusText, status, data } = res;
		        if (status == this.SUCCESS_STATUS) {
    
    
		          this.pageResult = data;
		          this.loading = false;
		        } else {
    
    
		          this.$message({
    
     message: statusText, type: "error" });
		          this.loading = false;
		        }
		      }).then(data!=null?data.callback:'').catch(response => {
    
    
                this.loading = false
            });;
    		},
        }
   }
   </javascript>

table.vue 的代码如下，请直接复制，还可以根据自己的需求来修改。

<template>
  <div>
    <!-- 
    表格栏-->
    <el-table
      :data="data.content"
      :highlight-current-row="highlightCurrentRow"
      @selection-change="selectionChange"
      @current-change="handleCurrentChange"
      @expand-change="expandChange"
      @row-click="rowClick"
      v-loading="loading"
      :show-summary="showSummary"
      :element-loading-text="$t('action.loading')"
      :border="border"
      :stripe="stripe"
      :default-expand-all="expandAllStatus"
      :row-class-name="tableRowClassName"
      :show-overflow-tooltip="showOverflowTooltip"
      :max-height="maxHeight"
      :size="size"
      :align="align"
      :ref="multipleTable"
      style="width:100%;"
    >
      <el-table-column v-if="showRadio" width="50" :label="'选择'">
        <template slot-scope="scope">
          <el-radio v-model="radioVal" :label="scope.row.id">&nbsp;</el-radio>
        </template>
      </el-table-column>
      <!-- 多选框 -->
      <el-table-column v-if="showCheckbox" type="selection" width="40"></el-table-column>
      <!-- 下拉展开 -->
       <el-table-column type="expand" class="psexpand" v-if="showExpand">
        <template slot-scope="props">
          <el-form inline>
            <!-- 下拉展开一个列表 -->
            <el-table :data="props.row[children]" v-if="changeSelect=='one'" inline size="small" class="psexpand" style="width: 100%;font-size:12px;">
                <el-table-column
                  v-for="column in columnsSelectDown"
                  header-align="center"
                  align="center"
                  :show-overflow-tooltip="true"
                  :prop="column.prop"
                  :label="column.label"
                  :width="column.width"
                  :min-width="column.minWidth"
                  :key="column.prop"
                  :type="column.type"
                  :sortable="false">
                </el-table-column>
            </el-table>
            <!-- 下拉展开一个列表结束 -->
               
            <!-- 下拉展开面板形式 -->
            <div v-if="panel" class="wrap-down-Text">
              <p>资金方：<span v-for="clums in props.row[children1]" :key="clums.index">{
    
    {
    
    clums.orgName}}</span></p>
              <p>资产池：<span v-for="clums in props.row[children2]" :key="clums.index">{
    
    {
    
    clums.name}}</span></p>
            </div>

          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="50">
        <template slot-scope="scope">
          <span>{
    
    {
    
    scope.$index+(pageRequest.pageNow - 1) * pageRequest.pageSize + 1}} </span>
        </template>
      </el-table-column>
      <!-- 下拉展开结束 -->
      <el-table-column
        v-for="column in columns"
        header-align="center"
        align="center"
        :show-overflow-tooltip="true"
        :prop="column.prop"
        :label="column.label"
        :width="column.width"
        :min-width="column.minWidth"
        :fixed="column.fixed"
        :key="column.prop"
        :type="column.type"
        :formatter="column.formatter"
        :sortable="false"
        :selectable="selectable"
      >
      </el-table-column>
       <el-table-column v-if="statusParams.status" width="80" :label="statusParams.label">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row[statusParams.model]"
            :active-color="statusParams.color"
            :active-value="statusParams.active"
            :inactive-value="statusParams.inactive"
            @change='changeStatusGL($event, scope.row)'
          >
          </el-switch>
        </template>
      </el-table-column>

      <el-table-column
        v-if="showOperation"
        fixed="right"
        header-align="center"
        align="center"
        :width="handleWidth"
        :label="'操作'"
      >
        <template slot-scope="scope">
          <slot :row="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:28px;">
      <el-pagination
        background
        layout="total, prev, pager, next, jumper"
        @current-change="refreshPageRequest"
        :current-page="pageRequest.pageNow"
        :page-size="pageRequest.pageSize"
        :total="data.totalCount"
        style="float:right;"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
    
     convertDict } from "@/dict/index.js";
export default {
    
    
  name: "KtTable",
  components: {
    
    
  },
  props: {
    
    
   
    changeSelect:{
    
     //one two   three  other 
      type: String,
      default:'one'
    },
     setPageNow:Boolean,
    columns: Array, // 表格列配置
    data: Object, // 表格分页数据
    columnsSelectDown:Array, //表格点击展开传参
    columnsSelectDown1:Array, //表格点击展开传参
    columnsSelectDown2:Array, //表格点击展开传参
    columnsSelectDown3:Array, //表格点击展开传参
    isBgColor:{
    
      //是否开启背景色
      type: Boolean,
      default: false
    },
    isBgColorNum: Array,  //是否开启背景色并传参    
    panel:{
    
    
      type: Boolean,
      default: false
    },
    relateType:{
    
    
      type:String,
      default:''
    },
    children:{
    
    
      type:String,
      default:'children'
    },
     children1:{
    
    
      type:String,
      default:'children1'
    },
     children2:{
    
    
      type:String,
      default:'children2'
    },
     children3:{
    
    
      type:String,
      default:'children3'
    },
    passWidth:Boolean,
     showExpand: {
    
    
      type: Boolean,
      default: false
    },
    size: {
    
    
      // 尺寸样式
      type: String,
      default: "mini"
    },
    //展开所有
    expandAllStatus:{
    
    
        type: Boolean,
      default: false
    },
    expandArray:{
    
    
      type: Array,
      default:function () {
    
    
          return []
      }},
    align: {
    
    
      // 文本对齐方式
      type: String,
      default: "left"
    },
    statusParams:{
    
    
      type: Object,
      default:function () {
    
    
          return {
    
    }
      }
    },
    listParams:{
    
    
      type: Object,
      default:function () {
    
    
          return {
    
    }
      }
    },
    pageRequest: {
    
    
      type: Object,
        default () {
    
    
          return {
    
    
            pageNow: 1,
            pageSize: 20
          }
        }
      },
    maxHeight: {
    
    
      // 表格最大高度
      type: Number,
      default: 1000
    },
    handleWidth: {
    
    
      // 操作列的宽度设置
      type: Number,
      default: 120
    },
    showOperation: {
    
    
      // 是否显示操作组件
      type: Boolean,
      default: true
    },
    showRadio: {
    
    
      // 是否显示单选
      type: Boolean,
      default: false
    },
    showCheckbox: {
    
    
      // 是否显示多选框
      type: Boolean,
      default: false
    },
    userStatus: {
    
    
      // 用户状态
      type: Boolean,
      default: false
    },
    border: {
    
    
      // 是否显示边框
      type: Boolean,
      default: true
    },
    stripe: {
    
    
      // 是否显示斑马线
      type: Boolean,
      default: false
    },
    highlightCurrentRow: {
    
    
      // // 是否高亮当前行
      type: Boolean,
      default: true
    },
    showOverflowTooltip: {
    
    
      // 是否单行显示
      type: Boolean,
      default: true
    },
    firstP:{
    
    
        // 自动加载查询方法
      type: Boolean,
      default: false
    },
    showSummary:{
    
    
        // 是否显示合计
      type: Boolean,
      default: false
    },
    multipleTable:{
    
    
      type:String,
      default:"multipleTable"
    }
  },
  data() {
    
    
    return {
    
    
      radioVal: "",
      setWidth: 120,
      // 分页信息
      first:1,
      loading: false, // 加载标识
      userId: sessionStorage.getItem("userId"),
      role: sessionStorage.getItem("role"),
      selections: [], // 列表选中列
    };
  },
   watch:{
    
    
    setPageNow(){
    
    
      this.pageRequest.pageNow = 1
    }
  },
  methods: {
    
    
    // 禁止选择
    selectable(row,index){
    
    
      if(row.isSelectable){
    
    
        return false
      }else{
    
    
        return true
      }
    },
       //点击展开问题刷新dom
    toggleRowExpansion(row) {
    
    

      this.$refs[this.multipleTable].toggleRowExpansion(row, true);
    },
    //展开
    expandChange(row,expandedRows){
    
    
 

       this.$emit("expandChange", row,expandedRows);
    },
    // 分页查询
    findPage: function() {
    
    
      this.loading = false;
      let callback = res => {
    
    
        this.loading = false;
      };
    if(this.firstP){
    
    
      if(this.first==1){
    
    
        this.first++
        return false
      }
    }

      
      this.$emit("findPage", {
    
    
        pageRequest: this.pageRequest,
        callback: callback
      });
    },
    // 选择切换
    selectionChange: function(selections) {
    
    
      this.selections = selections;
      this.$emit("selectionChange", {
    
     selections: selections });
    },
    // 选择切换
    handleCurrentChange: function(val) {
    
    
       this.radioVal = ''
      if (val !== null) {
    
    
        this.radioVal = val.id;
      }
      this.$emit("handleCurrentChange", {
    
     val: val });
    },
    changeStatusGL(event,row){
    
    
       this.$emit("changeStatusGL", row);
    },
    clearRadio() {
    
    
      this.radioVal = "";
    },
    rowClick: function(row) {
    
    
      this.$emit("rowClick", {
    
     row: row });
    },
    handleLookAnalysis(index, row) {
    
    
      this.$emit("handleLookAnalysis", index, row);
    },
    // 换页刷新
    refreshPageRequest: function(pageNow) {
    
    
      this.pageRequest.pageNow = pageNow;
      this.findPage();
    },
    // 可控制操作那一栏的宽度
    setWidthMethods:function () {
    
    
      if(this.passWidth == true){
    
    
        this.setWidth = 200
      }
    },
     tableRowClassName({
    
    row, rowIndex}) {
    
    
       if(this.isBgColor == true){
    
    
          if (row[this.isBgColorNum[0]] == this.isBgColorNum[1] ) {
    
    
            return 'err-row';
          }
          if(row[this.isBgColorNum[0]] == this.isBgColorNum[2] ){
    
    
             return 'warning-row';
          }else{
    
    
             return '';
          }
        }     
      }
  },
  mounted() {
    
    
    this.refreshPageRequest(1);
    // this.setWidthMethods ()
    
  },
  created() {
    
    }
};
</script>
<style  lang="scss" scoped>
.psexpand{
    
    
  position: relative;
  z-index: 1000;
}
/deep/ .wrap-down-Text{
    
    
  font-size: 14px;
  font-weight: 600;
  padding-left: 20px;
  span{
    
    
      font-size: 14px;
    font-weight: 400;
    margin-right: 15px;
  }
}
  /deep/ .el-table .err-row {
    
    
    background: #fd8585;
  }
   /deep/ .el-table .warning-row {
    
    
    background: #f7d17b;
  }

  /deep/  .el-table .success-row {
    
    
    background: #f0f9eb;
  }
</style>