elementUI vxe-table结合使用（通用表格）

App.vue 样式

.my-main{
  margin: 20px;
}
.dfc{
  display: flex;
  flex-direction: column;
}
.dfr{
  display: flex;
  flex-direction: row;
}
.f1{
  flex: 1;
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.baseColor{
  background-color:RGB(48,65,86);color:#fff;
}

父组件

<!--  -->
<template>
  <div class='f1 dfc my-main'>
    <TableTemplate
      :cols="columns"
      :tData="tableData"
      :pager="total"
      @pageTrigger="pageChange"
      :search="'fname'"
      :operation="'add,export,seq,del,pager'"
      @searchTrigger="search"
      @operationTrigger="operation">
    </TableTemplate>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import TableTemplate from '@/views/dashboard/tableTemplate'
export default {
//import引入的组件需要注入到对象中才能使用
components: {
  TableTemplate
},
data() {
  //这里存放数据
  return {
    // 表头
    columns: [
      {
        l: '公司名称',
        p: 'fname',
        w: null
      },
      {
        l: '编号',
        p: 'number',
        w: null
      },
      {
        l: '性别',
        p: 'sex',
        w: null
      },
    ],
    // 表数据
    tableData: [
      {
        fname: 'feng',
        number: '001',
        sex: 0
      },{
        fname: 'xiao',
        number: '123',
        sex: 1
      },{
        fname: 'llll',
        number: '244',
        sex: 1
      }
    ],
    // 总条数
    total: null,
  };
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  init(){
    this.total = this.tableData.length
  },
  // 搜索
  search(form) {
    console.log('搜索', form)
  },
  // 表格操作
  operation(data) {
    console.log('表格操作', data)
  },
  // 分页
  pageChange(data){
    console.log("切换页数据", data);
    // 根据 page size 请求数据
  }

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {
  this.init()

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类

</style>

子组件–通用表格

<!--  -->
<template>
    <div class='f1 dfc'>
        <div class="dfr" style="    margin-bottom: 20px;">
            <div class="fl f1 dfr">
                <div style="display: inline-flex;" v-if="isIncluded('fname')">
                    <span class="title">公司名称：</span>
                    <el-input
                        placeholder="请输入内容"
                        suffix-icon="el-icon-search"
                        v-model="searchForm.fname">
                    </el-input>
                </div>
                <div style="display: inline-flex;" v-if="isIncluded('number')">
                    <span class="title">编号：</span>
                    <el-input
                        placeholder="请输入内容"
                        suffix-icon="el-icon-search"
                        v-model="searchForm.number">
                    </el-input>
                </div>
                <el-button
                    v-if="search.length !== 0"
                    @click="handleSearch"
                    class="baseColor"
                    >
                    搜索
                </el-button>
            </div>
            <div class="fr">
                <el-button 
                    type="success" 
                    icon="el-icon-plus"
                    v-if="isIncluded('add')"
                    @click="add">
                </el-button>
                <el-button 
                    type="primary" 
                    v-if="isIncluded('export')"
                    class="baseColor"
                    @click="openExportEvent">
                    导出
                </el-button>
                <el-button 
                    type="primary" 
                    v-if="isIncluded('import')"
                    class="baseColor"
                    @click="importDataEvent">
                    导入
                </el-button>
            </div>
        </div>
        <div class="f1 dfc">
            <vxe-table
            border
            stripe
            align="center"
            ref="xTable"
            class="f1"
            highlight-hover-row
            :loading="loading"
            :data="tData"
            :export-config="{}">
            <vxe-column
                v-if="isIncluded('seq')"
                type="seq"
                title="序号"
                width="60"
            />
            <template v-for="(col, index) in cols">
                <vxe-column
                    v-if="col.p === 'sex'"
                    :key="index"
                    :field="col.p"
                    :width="col.w"
                    :title="col.l"
                    :formatter="formatterSex"
                />
                <vxe-column
                    v-else
                    :key="index"
                    :field="col.p"
                    :width="col.w"
                    :title="col.l"
                />
            </template>
            <vxe-table-column title="操作" width="150px" align="center" fixed="right" v-if="!isIncluded('noOperation')">
                <template #default="{ row }">
                    <el-button 
                        type="primary" 
                        icon="el-icon-edit"
                        v-if="isIncluded('edit')"
                        @click="handleOption(row, 'edit')">
                    </el-button>
                    <el-button 
                        type="danger" 
                        icon="el-icon-delete"
                        v-if="isIncluded('del')"
                        @click="handleOption(row, 'del')">
                    </el-button>
                    <el-button 
                        type="success" 
                        icon="el-icon-view"
                        v-if="isIncluded('check')"
                        @click="handleOption(row, 'check')">
                    </el-button>
                    <el-button 
                        type="success" 
                        icon="el-icon-setting"
                        v-if="isIncluded('setting')"
                        @click="handleOption(row, 'setting')">
                    </el-button>
                </template>
            </vxe-table-column>
            </vxe-table>
            <!-- 分页 -->
            <vxe-pager
            perfect
            v-if="isIncluded('pager')"
            :current-page="tablePage.currentPage"
            :page-size="tablePage.pageSize"
            :page-sizes="tablePage.pageSizes"
            :total="tablePage.totalResult"
            @page-change="pageChange"
            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Total']">
            </vxe-pager>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
//import引入的组件需要注入到对象中才能使用
props:{
    // 接收父组件传过来的搜索的字段
    search: {
      type: String,
      default: "",
    },
    // 接收父组件传过来的操作的按钮
    operation: {
      type: String,
      default: "",
    },
    // 表头
    cols: Array,
    // 表数据
    tData: Array,
    // 分页总数
    pager: Number,
},
components: {},
data() {
    //这里存放数据
    return {
        searchForm:{
            fname: null,
            number: null,
        },
        // 分页
        tablePage: {
            currentPage: 1,
            pageSize: 2,
            pageSizes: [2, 4, 6, 8],
            totalResult: this.pager
        },
        loading: false,
        sexList: [
            {
            label: "男",
            value: 1,
            },
            {
            label: "女",
            value: 0,
            }
        ],
    };
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
    init(){
        this.tablePage.totalResult = tData
    },
    // 根据页切换
    pageChange(val){
        this.tablePage.currentPage = val.currentPage
        let page = val.currentPage
        let limit = val.pageSize
        this.$emit("pageTrigger", { page: val, form: this.searchForm });
    },
    // 判断显示
    isIncluded(str) {
      const searchArr = this.search.split(",");
      const operationArr = this.operation.split(",");
      if (searchArr.includes(str)) return true;
      if (operationArr.includes(str)) return true;
      return false;
    },
    // 点击搜索返回搜索内容给父组件
    handleSearch() {
      this.$emit("searchTrigger", this.searchForm);
    },
    // 点击表格中操作按钮
    handleOption(row, action) {
      this.$emit("operationTrigger", { row, action });
    },
    // 新建
    add(){
        console.log('add');
    },
    // 导出
    openExportEvent(){
        this.$refs.xTable.openExport()
    },
    // 导入
    importDataEvent () {
        this.$refs.xTable.importData()
    },
    formatterSex({ cellValue }) {
      let item = this.sexList.find((item) => item.value === cellValue);
      return item ? item.label : "";
    },
    

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
span.title{
    margin-left: 15px;
    line-height: 40px;
}
.el-input{
    flex: 1;
}
.el-button{
    float: left;
    border: none;
}
</style>