element-ui使用总结

el-table表格

前端单独对所有数据实现表内数据搜索并且分页

主要是对el-table的数据赋值进行处理,要实现搜索和分页需要对数据进行2次处理filter,slice

:data="
                profit
                //filter是对搜索的数据进行过滤
                  .filter(
                    (data) =>
                      !busOrderSearch ||
                      data.profit
                        .toLowerCase()
                        .includes(busOrderSearch.toLowerCase())
                  )
                  //slice是对分页后的数据进行过滤
                  .slice(
                    (busOrderCurPage - 1) * busOrderPageSize,
                    busOrderCurPage * busOrderPageSize
                  )
              "

搜索数据后分页数据总数需要是新数据长度,故total做以下处理

 <el-pagination
                :total="
                  busOrderSearch
                    ? profit.filter(
                        (data) =>
                          !busOrderSearch ||
                          data.profit
                            .toLowerCase()
                            .includes(busOrderSearch.toLowerCase())
                      ).length
                    : profit.length
                "
              >
              </el-pagination>

 <el-table
              :cell-style="{ 'text-align': 'center' }"
              :header-cell-style="{
                background: '#f5f7fa',
                'text-align': 'center',
              }"
              :default-sort="{ prop: 'date', order: 'descending' }"
              :data="
                profit
                  .filter(
                    (data) =>
                      !busOrderSearch ||
                      data.profit
                        .toLowerCase()
                        .includes(busOrderSearch.toLowerCase())
                  )
                  .slice(
                    (busOrderCurPage - 1) * busOrderPageSize,
                    busOrderCurPage * busOrderPageSize
                  )
              "
            >
              <el-table-column
                label="Time"
                prop="time"
                sortable
                :formatter="formatDate"
              >
              </el-table-column>
              <el-table-column label="订单数(笔)" sortable prop="order">
              </el-table-column>
              <el-table-column
                label="较前一日(订单)"
                class-name="tableBlue"
                sortable
                prop="orderIncrease"
              >
                <template slot-scope="scope">
                  <span> +{{ scope.row.orderIncrease }}</span>
                </template>
              </el-table-column>
              <el-table-column label="收益" sortable prop="profit">
              </el-table-column>
              <el-table-column
                label="较前一日(收益)"
                class-name="tableBlue"
                sortable
                prop="profitIncrease"
              >
                <template slot-scope="scope">
                  <span> +{{ scope.row.profitIncrease }}</span>
                </template>
              </el-table-column>
              <el-table-column align="right">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="busOrderSearch"
                    size="mini"
                    @input="backTo1($event)"
                    placeholder="输入关键字搜索"
                  />
                </template>
              </el-table-column>
            </el-table>
            <div class="block" style="margin-top: 15px">
              <el-pagination
                align="center"
                :current-page="busOrderCurPage"
                :page-size="busOrderPageSize"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, prev, pager, next"
                :total="
                  busOrderSearch
                    ? profit.filter(
                        (data) =>
                          !busOrderSearch ||
                          data.profit
                            .toLowerCase()
                            .includes(busOrderSearch.toLowerCase())
                      ).length
                    : profit.length
                "
              >
              </el-pagination>
            </div>

数据

	  profit:[],//表格中总数据
	  busOrderSearch: "", //营业订单模糊搜索
      busOrderCurPage: 1, // 营业订单当前页码
      busOrderPageSize: 7, // 营业订单每页的数据条数

方法

//营业订单模糊搜索后自动返回第一页
    backTo1(event) {
      this.busOrderCurPage = 1;
    },
    //营业状态选择时间段搜索数据,提交请求
    changeSelectTime(busStateSelectID) {
      console.log("va", busStateSelectID);
      this.$store.dispatch("busStateSelect", busStateSelectID);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.busOrderCurPage = 1;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.busOrderCurPage = val;
    },

表格中对时间戳进行转换

过滤转换

 <el-table-column
                label="Time"
                prop="time"
                sortable
              >
               <template slot-scope="scope">
               <span>{{scope.row.time | formatDate}}</span>  
                </template>
              </el-table-column>

 filters: {
    formatDate(value) {
      let date = new Date(value);
      //注意对方给你的是毫秒还是秒，如果是毫秒需要转秒（*1000）
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "." + MM + "." + d;
    },
  },

对表格数据进行自定义处理

在表中插入
<template slot-scope="scope"> xxx </template>
例如

 <el-table-column
                label="Time"
                prop="time"
                sortable
              >
               <template slot-scope="scope">
               <span>{{scope.row.time | formatDate}}</span>  
                </template>
              </el-table-column>

表格中根据不同状态切换样式

对type进行操作

 :type="
                scope.row.status == '已接单'
                  ? 'primary'
                  : scope.row.status == '派送中'
                  ? 'success'
                  : scope.row.status == '已送达'
                  ? 'primary'
                  : 'danger'
              "

    <el-table-column
          prop="status"
          v-if="orderMStatus != '已完成'"
          fixed="right"
          label="订单状态"
        >
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.status == '已接单'
                  ? 'primary'
                  : scope.row.status == '派送中'
                  ? 'success'
                  : scope.row.status == '已送达'
                  ? 'primary'
                  : 'danger'
              "
              disable-transitions
              >{{ scope.row.status }}</el-tag
            >
          </template>
        </el-table-column>