element+table 可配置导出显示搜索的后管表单组件

1.demo使用

上demo应用实例 包括传参等都有注释说明

<Funtable
      ref="tableref"
      :url="dataTableOpt.url"
      :data-list="dataTableOpt.dataList"
      :page="dataTableOpt.page"
      :showSummary="dataTableOpt.showSummary"
      :showSummaryData="dataTableOpt.showSummaryData"
      :params="dataTableOpt.params"
      :max-height="600"
      :columns="dataTableOpt.columns"
    >

          <el-button type="primary" size="small" slot="left-filter">新增</el-button>

        <template slot="pics-column" slot-scope="scope">
          <div class="pics-list">
            <el-image v-for="(pic,picIndex) of scope.row.pics" :key="picIndex" :preview-src-list="scope.row.pics" class="pic-img" :src="pic" />
          </div>
        </template>


        <template slot="isShow-column" slot-scope="scope">
          <div v-if="scope.row.isShow==1" class="c67C23A">
            显示
          </div>
          <div v-else>
            隐藏
          </div>
        </template>
        <template slot="operate-column" slot-scope="scope">
          <!--            <el-button size="mini" type="default" @click="editItem(scope.row)">编辑</el-button>-->
          <el-button v-if="scope.row.isShow==1" size="mini" type="default" @click="showItem(scope.row)">隐藏</el-button>
          <el-button v-if="scope.row.isShow==0" size="mini" type="default" @click="getItem(scope.row)">显示</el-button>
          <!--            <el-button size="mini" type="danger" @click="delItem(scope.row)">删除</el-button>-->
        </template>
</Funtable>

需要声明的使用数组示例

dataTableOpt: {
          //是否显示搜索按钮  默认显示
          searchBtnShow:true,
        // 请求的路径
        url: '/mall/goods/com/list',
          //是否合计
          showSummary:true,
          //需要合计的字段
          showSummaryData:['id','star'],
        // 请求的额外参数
        params: {},
        // 展示的数据  如果传url 则不用传
        dataList: [],
        // 分页
        page: {
          size: 10,
          total: 0,
          current: 1,
          // 是否分页
          is_paginate: true
        },
        // 展示的列
        columns: [
          {
              //是否可以勾掉列
              isCancel:false,
              //固定是否
              fixed:'left',
            // 后台返回的字段
            prop: 'id',
            // 列表展示的名称
            label: '序号',
            // 文字排列
            align: 'center',
            // 列宽度  不写则自适应
            width: 80,
              //必填展示不展示
              showIf:true,
            // align: "center",
            // sortable: true,
            // 后面这些是filter使用的
            // 搜索
            search: false // 不需要搜索ID,所以都不需要了
          },
          {
              showIf:true,
            prop: 'productName',
            label: '商品',
            value: '',
            width: 300,
            align: 'left',
            field: 'Products_Name',
            // align: "center",
            // sortable: true,
            // 后面这些是filter使用的
            required: true,
            search: false
          },
          {
              showIf:true,
            prop: 'code',
            label: '商品编码',
            width: 160,
            align: 'center',
            serachName: 'code',
            search: {
              type: 'input',
              placeholder: '请输入商品编码'
            }
          },
          {
              showIf:true,
            prop: 'userName',
            label: '用户',
            width: 120,
            align: 'center',
            search: false
          },
          {
              showIf:true,
            prop: 'star',
            label: '评价星级',
            align: 'center',
            width: 120,
            serachName: 'star',
            search: {
              option: [{value: 1, label: 1}, {value: 2, label: 2}, {value: 3, label: 3}, {value: 4, label: 4}, {value: 5, label: 5}],
              type: 'select',
              operate: 'like',
              placeholder: '请选择星级',
              change: true
            }
          },
          {
              showIf:true,
            prop: 'content',
            label: '评价内容',
            align: 'center',
            search: false
          },
          {
              showIf:true,
            prop: 'pics',
            label: '评价图片',
            align: 'center',
            value: '',
            search: false
          },
          {
              showIf:true,
            prop: 'createTime',
            label: '评价时间',
            align: 'center',
            width: 160,
            value: '',
            serachName: 'createTime',
            search: false
          },
          {
              showIf:true,
            prop: 'isShow',
            label: '状态',
            align: 'center',
            width: 400,
            value: '',
            serachName: 'isShow',
            search: false
          },
          {
              //是否可以勾掉列
              isCancel:false,
              fixed:'right',
           showIf:true,
            prop: 'operate',
            label: '操作',
            align: 'center',
            width: 200,
            search: false
          }



        ]
      }

2.组件使用示例图片

1. 可以配置列是否可以选择配置，还是隐藏 固定等 只需要传入请求的路径 和 引入封装的接口方法
2. 使用的js-export-excel npm做的导出 选择项 根据配置列本地导出
3. 顶部的搜索项 可根据配置项的search 的类型type select input time搜索 字段等
   

3.组件下载链接

直达下载链接