Vue Element UI Table 自动生成 el-table 表封装 实例 2.0（详细教程）

Element UI Table 表封装

文章解析

table 组件封装

条件分页获取数据
自定义table 表头
自定义table 权限
自定义字段是否必须
自定义是否自动分页
自定义日期格式
监听发送权限操作
返回调用者信息
table 数据可视化面板

文章必读

Vue http 请求封装包
Element UI Table 分页教程
Vue 组件通信

Template

<template>
  <div class="container-fluid">
    <div class="container-fluid card" v-show="props.datapanel">
      <h4>table Data</h4>
      <span>
      <ul class="border-secondary-50 p-0 m-0 border" style="list-style: none;" v-for="(prop,index) in props">
        <li class="d-flex flex-row text-left"><span
          class="font-weight-bolder">{
  {index}}：</span><span>{
  {prop}}</span></li>
      </ul>
      </span>
    </div>
    <el-table v-if="!props.selfmotionpage" highlight-current-row border
              :data="!props.selfmotionpage?tableData:tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
              class="w-auto">
      <template v-for="(col ,index) in props.cols">

        <el-table-column v-if="col.type==='String'&&col.dataIdentification===''&&col.hidden!=='true'" :prop="col.prop"
                         :label="col.label"
                         :width="col.width" :sortable="col.sort==='sort'?true:false"
        ></el-table-column>
        &lt;!&ndash;date&ndash;&gt;
        <el-table-column v-if="col.type==='date'&&col.hidden!=='true'" :prop="col.prop" :label="col.label"
                         :formatter="dateFormat"
                         :sortable="col.sort==='sort'?true:false"
                         :width="col.width"></el-ta