vue+antd table 動態分頁 +vue antd select 用法 + es6移除元素

十年河東，十年河西，莫欺少年窮

學無止境，精益求精

我是一名后台開發人員，精通C#語言的NetFrm開發，NetCore開發。各類數據庫開發。前端熟練vue 和 react。因此，也可以稱自己為全棧開發。

目前效力於中國一家資深企業，主要從事IOT物聯網開發，涉及到MOTT，中移動NB、LWM2M，TCP，UDP等協議。處理大數據，高並發，服務器集群等。

摸索了好一會了，第一個vue+antd 動態分頁完成了，效果如下：

 

源碼奉上：

<template>
  <a-spin tip="查詢中..." :spinning="spinnings">
    <div>
      <a-card
        hoverable="true"
        title=""
        headStyle="text-align:left;color:#606266;font-size:14px"
        bodyStyle="border:none"
      >
        <a slot="extra" href="#" style="float: left">
          <a-breadcrumb separator=">">
            <a-breadcrumb-item>充放電圖表</a-breadcrumb-item>

            <a-breadcrumb-item>電池心跳 </a-breadcrumb-item>
          </a-breadcrumb>
        </a>
        <div>
          <a-row align="middle" class="arow">
            <a-col :span="5">
              <a-checkable-tag v-model="checked" @change="handleChange">
                電池串號
              </a-checkable-tag>
              <a-input
                placeholder="請輸入電池串號"
                style="width: 150px"
                v-model="search.BatterySN"
              />
            </a-col>
            <a-col :span="5">
              <a-checkable-tag v-model="checked" @change="handleChange">
                類型
              </a-checkable-tag>
              <a-select
                default-value="2"
                style="width: 150px"
                v-model="search.cfd"
              >
                <a-select-option value="-1">請選擇</a-select-option>
                <a-select-option value="2"> 擱置 </a-select-option>
                <a-select-option value="1"> 放電 </a-select-option>
                <a-select-option value="0"> 充電 </a-select-option>
              </a-select>
            </a-col>
            <a-col :span="10">
              <a-checkable-tag v-model="checked" @change="handleChange">
                日期
              </a-checkable-tag>
              <a-range-picker
                :show-time="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                :placeholder="['開始時間', '結束時間']"
                @change="rangedateChange"
                @ok="onOk"
                :value="daterangeValue"
              />
            </a-col>
            <a-col :span="4">
              <a-button type="primary" @click="searchclick"> 查詢 </a-button>
              &nbsp;
              <a-button type="danger" @click="searchclear"> 重置 </a-button>
            </a-col>
          </a-row>

          <a-table
            :columns="columns"
            :data-source="dataSource"
            :pagination="pagination"
            @change="handleTableChange"
            :rowKey="(tableDatas) => dataSource.Id"
            :scroll="{ x: 2880 }"
            style="margin-top: 20px"
          >
            <a slot="action" href="javascript:;">編輯</a>
          </a-table>
        </div>
      </a-card>
    </div>
  </a-spin>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";

export default {
  name: "Echarts",
  data() {
    return {
      pagination: {
        total: 0,
        pageSize: 10, //每頁中顯示10條數據
        showSizeChanger: true,
        pageSizeOptions: ["5", "10", "20", "50", "100"], //每頁中顯示的數據
        showTotal: (total) => `共有 ${total} 條數據`, //分頁中顯示總的數據
      },
      spinnings: false,
      search: {
        BatterySN: "1234567890123456",
        cfd: "-1",
        rangedate: [],
        sdate: "",
        edate: "",
        PageNumber: 1,
        PageSize: 10,
      },
      param: {},
      daterangeValue: [],
      locale,
      checked: false,
      dataSource: [],
      columns: [
        {
          title: "電池串號",
          width: 165,
          dataIndex: "BatterySN",
          key: "BatterySN",
          fixed: "left",
          align: "center",
        },
        {
          title: "電量",
          width: 68,
          dataIndex: "SOC",
          key: "SOC",
          fixed: "left",
          align: "center",
          customRender: function (val) {
            return val ? val + "%" : "";
          },
        },
        {
          title: "信號值",
          dataIndex: "XinHao",
          key: "-1",
          width: 78,
          align: "center",
        },
        {
          title: "健康值",
          dataIndex: "SOH",
          key: "1",
          width: 78,
          align: "center",
        },
        {
          title: "BMS狀態",
          dataIndex: "BmsStatusCN",
          key: "2",
          width: 98,
          align: "center",
        },
        {
          title: "BMS告警",
          dataIndex: "BmsErrorCodeCN",
          key: "3",
          width: 95,
          align: "center",
        },
        {
          title: "總電壓",
          dataIndex: "TotalVoltage",
          key: "4",
          width: 78,
          align: "center",
          customRender: function (val) {
            return val ? val / 10 : "";
          },
        },
        {
          title: "總電流",
          dataIndex: "TotalElectric",
          key: "5",
          width: 78,
          align: "center",
          customRender: function (val) {
            return val ? Math.abs(16000 - val) / 10 : "";
          },
        },
        {
          title: "循環次數",
          dataIndex: "BatteryLoopNumber",
          key: "6",
          width: 98,
          align: "center",
        },
        {
          title: "充電次數",
          dataIndex: "BatteryChargingNumber",
          key: "7",
          width: 98,
          align: "center",
        },
        {
          title: "單體電壓_1",
          dataIndex: "SigBatteryVoltage_1",
          key: "8",
          width: 108,
          align: "center",
        },
        {
          title: "單體電壓_2",
          dataIndex: "SigBatteryVoltage_2",
          key: "9",
          width: 108,
          align: "center",
        },
        {
          title: "單體電壓_3",
          dataIndex: "SigBatteryVoltage_3",
          key: "10",
          width: 108,
          align: "center",
        },
        {
          title: "單體電壓_4",
          dataIndex: "SigBatteryVoltage_4",
          key: "11",
          width: 108,
          align: "center",
        },
        {
          title: "單體電壓_5",
          dataIndex: "SigBatteryVoltage_5",
          key: "12",
          width: 108,
          align: "center",
        },
        {
          title: "單體電壓_6",
          dataIndex: "SigBatteryVoltage_6",
          key: "13",
          width: 108,
          align: "center",
        },
        {
          title: "單體電壓_7",
          dataIndex: "SigBatteryVoltage_7",
          key: "14",
          width: 108,
          align: "center",
        },
        {
          title: "單體電壓_8",
          dataIndex: "SigBatteryVoltage_8",
          key: "15",
          width: 108,
          align: "center",
        },
        {
          title: "單體電壓_9",
          dataIndex: "SigBatteryVoltage_9",
          key: "16",
          width: 108,
          align: "center",
        },
        {
          title: "單體電壓_10",
          dataIndex: "SigBatteryVoltage_10",
          key: "17",
          width: 115,
          align: "center",
        },
        {
          title: "單體電壓_11",
          dataIndex: "SigBatteryVoltage_11",
          key: "18",
          width: 115,
          align: "center",
        },
        {
          title: "單體電壓_12",
          dataIndex: "SigBatteryVoltage_12",
          key: "19",
          width: 115,
          align: "center",
        },
        {
          title: "單體電壓_13",
          dataIndex: "SigBatteryVoltage_13",
          key: "20",
          width: 115,
          align: "center",
        },
        {
          title: "單體電壓_14",
          dataIndex: "SigBatteryVoltage_14",
          key: "21",
          width: 115,
          align: "center",
        },
        {
          title: "單體電壓_15",
          dataIndex: "SigBatteryVoltage_15",
          key: "22",
          width: 115,
          align: "center",
        },
        {
          title: "單體電壓_16",
          dataIndex: "SigBatteryVoltage_16",
          key: "23",
          width: 115,
          align: "center",
        },
        {
          title: "單體電壓_17",
          dataIndex: "SigBatteryVoltage_17",
          key: "24",
          width: 115,
          align: "center",
        },
        {
          title: "單體電壓_18",
          dataIndex: "SigBatteryVoltage_18",
          key: "25",
          width: 115,
          align: "center",
        },
        {
          title: "單體電壓_19",
          dataIndex: "SigBatteryVoltage_19",
          key: "26",
          width: 115,
          align: "center",
        },
        {
          title: "單體電壓_20",
          dataIndex: "SigBatteryVoltage_20",
          key: "27",
          width: 115,
          align: "center",
        },
        {
          title: "溫度_1",
          dataIndex: "Temperature_1",
          key: "28",
          width: 98,
          align: "center",
          customRender: function (val) {
            return val ? Math.abs(val - 40) : "";
          },
        },
        {
          title: "溫度_2",
          dataIndex: "Temperature_2",
          key: "29",
          width: 98,
          align: "center",
          customRender: function (val) {
            return val ? Math.abs(val - 40) : "";
          },
        },
        {
          title: "MOS溫度",
          dataIndex: "MosTemperature",
          key: "30",
          width: 108,
          align: "center",
          customRender: function (val) {
            return val ? Math.abs(val - 40) : "";
          },
        },
        {
          title: "充電MOS狀態",
          dataIndex: "CD_MosCN",
          key: "31",
          width: 135,
          align: "center",
        },
        {
          title: "放電MOS狀態",
          dataIndex: "FD_MosCN",
          key: "32",
          width: 135,
          align: "center",
        },
        {
          title: "保護板進水檢測",
          dataIndex: "WatherCheckCN",
          key: "33",
          width: 175,
          align: "center",
        },
        {
          title: "創建日期",
          dataIndex: "CreateTimeCN",
          key: "34",
          fixed: "right",
          width: 240,
          align: "center",
          customRender: function (val) {
            return val ? moment(val).format("YYYY-MM-DD HH:mm:ss") : "";
          },
        },
      ],
    };
  },
  methods: {
    moment,
    getCurrentStyle(current, today) {
      const style = {};
      if (current.date() === 1) {
        style.border = "1px solid #1890ff";
        style.borderRadius = "50%";
      }
      return style;
    },
    handleChange(checked) {
      console.log(checked);
    },
    handleTableChange(page, pageSize) {
      this.search.pageSize=page.pageSize;
      this.search.PageNumber=page.current;
      this.searchclick();
     
    },
    rangedateChange(date, dateAry) {
      let that = this;
      //console.log(date);
      if (dateAry.length > 0) {
        that.daterangeValue = dateAry;
        that.search.sdate = dateAry[0];
        that.search.edate = dateAry[1];
      }
    },
    onOk(value) {
      console.log("onOk: ", value);
    },
    searchclick() {
      let that = this;
      that.spinnings = true;
      if (!that.search.BatterySN) {
        that.$message.error("請輸入電池串號。");
        that.spinnings = false;
        return;
      }
 
      this.$axios({
        url: "/api/Echats/ReadBatteryHearts",
        method: "post",
        data: {
          BatterySn: that.search.BatterySN,
          Stime: that.search.sdate,
          Etime: that.search.edate,
          cfd: that.search.cfd,
          PageNumber: that.search.PageNumber,
          PageSize: that.search.pageSize,
        },
      })
        .then(function (result) {
          console.log(result);
          if (!result.Data.Data || result.Data.Data.length == 0) {
            that.$message.error("未查詢到任何數據。");
            that.spinnings = false;
            return;
          }
          that.spinnings = false;
          that.dataSource = result.Data.Data;
          that.pagination.total=result.Data.Pagination.Total;
        })
        .catch(function (error) {
          that.spinnings = false;
          console.log(error);
        });
    },
    searchclear() {
      this.search = {
        BatterySN: "",
        cfd: "",
        rangedate: [],
        sdate: "",
        edate: "",
      };
      this.daterangeValue = [];
    },
  },
  mounted() {},
};
</script>
<style scoped>
.img {
  width: 100%;
  height: auto;
}
.arow {
  text-align: left;
  margin-bottom: 25px;
}

.arowLat {
  text-align: left;
  margin-top: 25px;
}
</style>

主要關注一個事件和一個對象。

變量：pagination   事件：handleTableChange

table 頁碼變化，頁容量變化時：

    handleTableChange(page, pageSize) {
      this.search.pageSize=page.pageSize;
      this.search.PageNumber=page.current;
      this.searchclick();
     
    },

 searchclick() {
      let that = this;
      that.spinnings = true;
      if (!that.search.BatterySN) {
        that.$message.error("請輸入電池串號。");
        that.spinnings = false;
        return;
      }
 
      this.$axios({
        url: "/api/Echats/ReadBatteryHearts",
        method: "post",
        data: {
          BatterySn: that.search.BatterySN,
          Stime: that.search.sdate,
          Etime: that.search.edate,
          cfd: that.search.cfd,
          PageNumber: that.search.PageNumber,
          PageSize: that.search.pageSize,
        },
      })
        .then(function (result) {
          console.log(result);
          if (!result.Data.Data || result.Data.Data.length == 0) {
            that.$message.error("未查詢到任何數據。");
            that.spinnings = false;
            return;
          }
          that.spinnings = false;
          that.dataSource = result.Data.Data;
          that.pagination.total=result.Data.Pagination.Total;
        })
        .catch(function (error) {
          that.spinnings = false;
          console.log(error);
        });
    },

查詢時，要對pagination.Total 賦值

that.pagination.total=result.Data.Pagination.Total;

其他，看源碼應該可以看懂。

vue antd  帶有查詢的 select 用法：

 <a-col :span="12">
            <a-checkable-tag v-model="checked" @change="handleChange">
              OTA版本號：
            </a-checkable-tag>
            <a-select
              show-search
              placeholder="OTA版本號"
              style="width: 200px"
              :filter-option="filterOption"
              @change="handleselectChange"
              v-model="version"
            >
           
            <a-select-option v-for="(item,index) in versions" :key="index">
               {{ item.value }}
             </a-select-option>
            </a-select>
            <a-button type="primary" @click="goOTA()">
              一鍵升級
            </a-button>
            <a-button type="danger" @click="setModal1Visible(true)">
              選擇
            </a-button>
          </a-col>

 data() {
    return {
      version:'',
      versions: [{key:'1.0',value:'1.0'},{key:'2.0',value:'2.0'},{key:'3.0',value:'3.0'}],
           }
        }

方法：

methods: {
    goOTA(){
console.log(this.version)
    },
    handleselectChange(value) {
     //  console.log(`selected ${value}`);
    },

    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    }
}

es6移除元素的方法，參考：https://www.cnblogs.com/linsx/p/8331623.html

一句話：

    remove(record) {
       let that=this;
      that.dataSelect.splice(that.dataSelect.findIndex(item => item.Id === record.Id), 1)
    },

@奇才卧龍的博客