vue-表格查询

html：

    <el-row class="order-input" :gutter="20">
        <el-col :span="2.2">
          <div class="grid-content bg-purple-dark">卡券名称</div>
          <el-input v-model="dataForm.name" placeholder="输入昵称查询"></el-input>
        </el-col>
        <!-- 新改 -->
        <el-col :span="2.2">
          <div class="grid-content bg-purple-dark">卡券类型</div>
          <el-select placeholder="请选择" v-model="dataForm.type">
            <el-option
              v-for="item in card"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2.2">
          <div class="grid-content bg-purple-dark">使用行为</div>
          <el-select placeholder="请选择" v-model="dataForm.actionStatus">
            <el-option
              v-for="item in behavior"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <!--  -->
        <el-col :span="2.2">
          <div class="grid-content bg-purple-dark">业务类型</div>
          <el-select placeholder="请选择" v-model="dataForm.businessType">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <!-- 新改 -->
        <el-col :span="2.2">
          <div class="grid-content bg-purple-dark">使用范围</div>
          <el-select placeholder="请选择" v-model="dataForm.goodsType">
            <el-option
              v-for="item in uscope"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col :span="2.2">
          <div class="grid-content bg-purple-dark">领取状态</div>
          <el-select placeholder="请选择" v-model="dataForm.receiveState">
            <el-option
              v-for="item in getStatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <!--  -->
        <el-col :span="6">
          <div class="grid-content bg-purple-dark">创建时间</div>
          <el-row class="user-input">
            <el-col :span="10">
              <el-date-picker
                v-model="dataForm.startingTime"
                type="date"
                value-format="timestamp"
                :picker-options="pickerOptionsStart"
                placeholder="开始日期"
              ></el-date-picker>
            </el-col>
            <el-col :span="1">
              <div class="text bg-purple-light">至</div>
            </el-col>
            <el-col :span="10">
              <el-date-picker
                v-model="dataForm.endTime"
                type="date"
                value-format="timestamp"
                :picker-options="pickerOptionsEnd"
                placeholder="结束日期"
              ></el-date-picker>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2.2" class="order-button btn_search">
          <el-button type="primary" size="small" @click="getData()">查询</el-button>
        </el-col>
        <el-col :span="2.4" class="order-button">
          <el-button type="primary" size="small" id="export" @click="exportTable">导出</el-button>
        </el-col>
        <el-col :span="2.4" class="order-button">
          <el-button type="primary" size="small" id="export">全部导出</el-button>
        </el-col>
     </el-row>
     

表格：

  <el-table class="user-table" :data="tableData" border style="width: 100%" id="tableExcel">
    <el-table-column prop="id" label="卡券ID"></el-table-column>
    <el-table-column prop="addTime" label="创建时间" min-width="100"></el-table-column>
    <el-table-column prop="name" label="卡券名称"></el-table-column>
	-------------
  </el-table>

分页：

<!-- 分页 -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="dataForm.pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="dataForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>

js:
引入时间格式化，下面的表格里面有时间就需要用到：

import moment from "moment";

 data() {
    return {
      total: 0,
      dataForm: {
        name: "", //卡券名称
        type: "", //卡券类型(1.满减,2.折扣)
        actionStatus: "", //使用行为:1.新人2.部分
        businessType: "", //业务类型(0-所有业务 1-鲜食到家 2-产地直发)
        goodsType: "", //使用范围(0-所有商品 1-原价商品)
        receiveState:"",//领用状态 1.已停止 2领用中 3已领完
        startingTime: "",//开始时间
        endTime: "", //结束时间
        pageNum: 1,//查询页数
        pageSize: 10 //每页多少条
      },
      // 表格数据
      tableData: [],
      //卡券类型
      card: [
        {
          value: "1",
          label: "满减"
        },
        {
          value: "2",
          label: "折扣"
        }
      ],
      //使用行为
      behavior: [
        {
          value: "1",
          label: "新人专享"
        },
        {
          value: "2",
          label: "指定用户"
        }
      ],
      //使用范围
      uscope: [
        {
          value: "0",
          label: "所有商品"
        },
        {
          value: "1",
          label: "原价商品"
        }
      ],
      getStatus:[
        {
          value: "1",
          label: "已停用"
        },
        {
          value: "2",
          label: "领用中"
        },
        {
          value: "3",
          label: "已领完"
        }
      ],
      //
      options: [
        {
          value: "0",
          label: "所有业务"
        },
        {
          value: "1",
          label: "鲜食到家"
        },
        {
          value: "2",
          label: "产地直发"
        }
      ],
      options2: [
        {
          value: "0",
          label: "所有业务"
        },
        {
          value: "1",
          label: "鲜食到家"
        },
        {
          value: "2",
          label: "产地直发"
        }
      ], 
      // 设置结束时间不能早于开始时间
      pickerOptionsStart: {
        disabledDate: time => {
          const endDateVal = new Date(this.dataForm.endTime).getTime();
          if (endDateVal) {
            return time.getTime() > endDateVal + 1;
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          const beginDateVal = new Date(this.dataForm.startingTime).getTime();
          if (beginDateVal) {
            return time.getTime() < beginDateVal + 1;
          }
        }
      }
    };
  },

接口：
获取列表：

methods: {
	getData() {
      get("/sys/discount/couponList", this.dataForm).then(res => {
        if (res.code === 200) {
          //搜索时候下面的表格里面的时间格式化要在这里
          res.data.forEach(item => {
            if (item.addTime == null) {
              item.addTime = "";
            } else {
              item.addTime = moment(item.addTime).format("YYYY-MM-DD HH:mm:ss");
            }
          });
          //分页总数
          this.total = res.count;
          //绑定表格里面的数据tableData，将res.data赋给绑定的表格tableData
          this.tableData = res.data;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      });
    },
}

时间格式化：
首先安装moment：

npm install moment --save

安装完之后，使用的时候记得引用

import moment from "moment";

使用：

moment(this.date).format("dddd")//星期二