可直接使用的vue-element-admin complex-table模版

1. 我将 complex-table，所有与后端对接的函数都已经注释掉，模版可直接使用，有后端接口再将后端接口打开即可，整整花了一天看源码，希望大家在复制的时候可以点个关注，点个赞
2. 所有重要的地方都已经写好了注释方便大家阅读

<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- 上面的根据标题进行收索搜索框 -->
      <!-- 当回车按键弹起的时候触发handleFilter方法，native阻止input默认事情--> 
      <el-input v-model="listQuery.intro" placeholder="简介" style="width: 300px;" class="filter-item" @keyup.enter.native="handleFilter" />

      <!-- 根据id进行升降处理 -->
      <!-- listQuery.sort与 item.key进行绑定从而改变listQuery中的参数-->
      <el-select v-model="listQuery.sort" style="width: 140px" class="filter-item" @change="handleFilter">
        <el-option v-for="item in sortOptions" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>

      <!-- 搜索按钮 -->
      <!--饿了么的button 组件   v-waves使用水波纹特效 type设置样式  icon设置图标 @click触发方法 -->
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>

      <!-- 添加按钮 -->
      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-edit" @click="handleCreate">
        增加
      </el-button>

      <!-- 导出按钮 -->
      <el-button v-waves :loading="downloadLoading" class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">
        导出
      </el-button>
    </div>

<!-- 这里就是下面的列表模块 -->
<!--以上都是搜索框的内容  -->
<!-- 下面是列表展示  -->
<!-- v-loading 过渡效果 listLoading
             data 遍历的数组
             border 是否带有纵向边框
             fit 列的宽度是否自撑开
             @sort-change 当表格的排序条件发生变化的时候会触发该事件
 -->
<!-- 表格data显示的数据 -->
<!-- sortChange是下面的列表升降序箭头 -->
    <el-table
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >

 <!-- 表单的列组件  label  显示的标题  prop  对应列内容的字段名  sortable 对应列是否可以排序  align 对齐方式 -->
      <el-table-column label="ID" prop="id" sortable="custom" align="center" width="80" :class-name="getSortClass('id')">
        <template slot-scope="{row}">
          <span>{
   {
    row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="日期" width="150px" align="center">
        <template slot-scope="{row}">
          <span>{
   {
    row.timestamp | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>

<!-- 这里绑定了一个修改数据的回调函数，和edit的是一样 -->
      <el-table-column label="简介" min-width="150px">
        <template slot-scope="{row}">
          <span class="link-type" @click="handleUpdate(row)">{
   {
    row.intro}}</span>
        </template>
      </el-table-column>


      <el-table-column label="价格" align="center" width="95">
        <template slot-scope="{row}">
          <span>{
   {
    row.price }}</span>
        </template>
      </el-table-column>

       <!-- 状态栏 -->
      <el-table-column label="套餐状态" class-name="status-col" width="100">
        <template slot-scope="{row}">
          <!-- type控制按钮的颜色样式 -->
          <el-tag :type="row.status | statusFilter">
            {
   {
    row.status }}
          </el-tag>
        </template>
      </el-table-column>


        <!-- 这里是我们的操作栏 -->
      <el-table-column label="Actions" align="center" width="230" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            编辑
          </el-button>
          <!-- 已经完善 -->
          <el-button v-if="row.status!='售罄'" size="mini" type="success" @click="handleModifyStatus(row,'售罄')">
            售罄
          </el-button>
          <el-button v-if="row.status!='可购买'" size="mini" @click="handleModifyStatus(row,'可购买')">
           可购买
          </el-button>
          <el-button v-if="row.status!='deleted'" size="mini" type="danger" @click="handleDelete(row,$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

<!-- 这里是下面的分页器 -->
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />

<!-- 下面分别是编辑页面，以及添加页面，这里应该是定位的形式出现 -->
<!-- 饿了么的对话框组件  这里用于展示 新增修改界面  
       :title="textMap[dialogStatus]"  标题为下面声明的textMap数组中的dialogStatus key 的值
       :visible.sync="dialogFormVisible"   是否显示 Dialog 传入true展示 flase隐藏 这里界面初始化时为false 点击新增和修改时修改为true
 -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
<!-- 这部分是添加的表单 -->
<!-- 饿了么的表单组件  
    ref  给表单起个别名dataForm 下面可以用this.$ref.dataForm获取表单dom
    rules设置表单数据校验规则为rules，rules在下面vue中声明  label-position标题对齐方式
-->
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">

        <el-form-item label="简介">
            <el-input v-model="temp.intro" placeholder="请输入简介"></el-input>
        </el-form-item>

        <el-form-item label="日期" >
          <el-date-picker v-model="temp.timestamp" type="datetime" placeholder="选择一个日期" />
        </el-form-item>

        <el-form-item label="状态">
          <el-select v-model="temp.status" class="filter-item" placeholder="请选择一个状态">
            <el-option v-for="item in statusOptions" :key="item" :label="item" :value="item" />
          </el-select>
        </el-form-item>
         
          <el-form-item label="价格">
            <el-input v-model="temp.price" placeholder="请输入价格"></el-input>
        </el-form-item>

        <el-form-item label="行程介绍">
          <el-input v-model="temp.schedu" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
        </el-form-item>
      </el-form>

      <div slot="footer"