欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue el-table 動態(tài)添加行與刪除行的實現(xiàn)

 更新時間：2022年07月26日 10:50:04   作者：＊且聽風吟  
這篇文章主要介紹了vue el-table 動態(tài)添加行與刪除行的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

el-table 動態(tài)添加行與刪除行

項目中有需要動態(tài)添加和刪除 el-table 行的需要，就學習了下，發(fā)現(xiàn)很簡單：

<template>
? <el-dialog
? ? width="50%"
? ? :visible.sync="isShow"
? ? :before-close="beforeClose"
? ? title="自定義設備類型屬性">
? ? <div class="dialogDiv">
? ? ? <el-table?
? ? ? ? :data="tableData.filter(data => handleAdd || data.name.toLowerCase().includes(handleAdd.toLowerCase()))"?
? ? ? ? style="width: 100%" border>
? ? ? ? <el-table-column prop="code"?
? ? ? ? ? :label="$t('basicData.device.propDlg.code')">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column prop="maxValue"?
? ? ? ? ? :label="$t('basicData.device.propDlg.maxValue')">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column prop="minValue"?
? ? ? ? ? :label="$t('basicData.device.propDlg.minValue')">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column prop="name"?
? ? ? ? ? :label="$t('basicData.device.propDlg.name')">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column prop="valueType"?
? ? ? ? ? :label="$t('basicData.device.propDlg.valueType')">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column prop="warning"?
? ? ? ? ? :label="$t('basicData.device.propDlg.warning')">
? ? ? ? </el-table-column>
? ? ? ? <el-table-column align="center" width="160px">
? ? ? ? ? <template slot="header" slot-scope="scope">
? ? ? ? ? ? <el-button v-model="handleAdd"?
? ? ? ? ? ? ? size="mini"
? ? ? ? ? ? ? type="success"
? ? ? ? ? ? ? circle plain
? ? ? ? ? ? ? icon="el-icon-plus"
? ? ? ? ? ? ? @click="handleAdd(scope.$index, scope.row)"> ? ? ?
? ? ? ? ? ? ? {{ $t('common.add') }} ? ? ?
? ? ? ? ? ? </el-button>
? ? ? ? ? </template>
? ? ? ? ? <template slot-scope="scope">
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? size="mini"
? ? ? ? ? ? ? type="primary"
? ? ? ? ? ? ? circle plain
? ? ? ? ? ? ? icon="el-icon-edit"
? ? ? ? ? ? ? @click="handleEdit(scope.$index, scope.row)">
? ? ? ? ? ? ? {{ $t('common.edit') }}
? ? ? ? ? ? </el-button>
? ? ? ? ? ? <el-button
? ? ? ? ? ? ? size="mini"
? ? ? ? ? ? ? type="danger"
? ? ? ? ? ? ? circle plain
? ? ? ? ? ? ? icon="el-icon-delete"
? ? ? ? ? ? ? @click="handleDelete(scope.$index, scope.row)">
? ? ? ? ? ? ? {{ $t('common.delete') }}
? ? ? ? ? ? </el-button>
? ? ? ? ? </template>
? ? ? ? </el-table-column>
? ? ? </el-table>
? ? </div>
? ? <span slot="footer">
? ? ? <el-button @click="cancel">{{ $t('common.cancel') }}</el-button>
? ? ? <el-button @click="confirm" type="primary">{{ $t('common.confirm') }}</el-button>
? ? </span>
? </el-dialog>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? tableData: []
? ? }
? },
? methods: {
? ? // 添加行
? ? handleAdd() {
? ? ? let row = {
? ? ? ? code: "",
? ? ? ? maxValue: "",
? ? ? ? minValue: "",
? ? ? ? name: "",
? ? ? ? valueType: "",
? ? ? ? warning: ""
? ? ? }
? ? ? this.tableData.push(row)?
? ? },
? ? // 編輯
? ? handleEdit(index, row) { ??
? ? },
? ? // 刪除行
? ? handleDelete(index, row) {
? ? ? this.tableData.splice(index, 1)
? ? },
? ? cancel() {
? ? ? this.$emit("cancel")
? ? },
? ? confirm() {
? ? ? this.$emit("confirm", this.tableData)
? ? }
? }
};
</script>
<style lang="scss" scoped>
.dialogDiv {
? height: 300px;
? overflow: auto;
}
</style>

以上 handleAdd 和 handleDelete 方法便可實現(xiàn)動態(tài)添加行和刪除行。

原理：vue是數(shù)據驅動 dom 進行渲染，所以改變 el-table 綁定的數(shù)組，就可以改變 el-table。

點擊“添加”按鈕就給數(shù)組添加一行數(shù)據，從而表格也會新增一行，點擊“刪除”按鈕就刪除數(shù)組當前的這一行數(shù)據，從而表格刪除當前行。

el-table 合計行放在首行

效果如圖所示

效果圖

首先在el-table ,添加屬性

summary-method=“getSummaries” show-summary
<div class="contentInfoWrap">
            <el-table :data="tableData" class="customTable" :summary-method="getSummaries" show-summary border :header-cell-style="HeadTable" :cell-style="columnStyle"
              :row-class-name="tableRowClassName" style="width: 100%">
              <el-table-column width="150" fixed>
                <template slot="header">
                  <div></div>
                </template>
                <template slot-scope="scope">
                  <div class="filstColumn">
                    <span>{{ scope.row.name }}</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" width="120" prop="name" label="活動月"></el-table-column>
              <el-table-column align="center" width="120" prop="channel" label="渠道"></el-table-column>
              <el-table-column align="center" width="120" prop="number" label="CPT VOL(箱)"></el-table-column>
            </el-table>
          </div>

2.定義合計行的位置和樣式

方法一：通過css 控制

// 合計行樣式
.el-table__footer-wrapper tbody td,
.el-table__header-wrapper tbody td {
  background-color: #e3f3ff !important;
  color: #666;
}
.el-table__footer-wrapper .is-leaf {
  color: #666 !important;
}
.el-table__fixed-footer-wrapper tbody td {
  border-top: 1px solid #ebeef5;
  background-color: #e3f3ff;
  color: #666;
  text-align: center !important;
}
.has-gutter tr td .cell {
  text-align: center;
  color: #001111;
}
//合并行放在第一行
.contentInfoWrap .el-table {
  display: flex;
  flex-direction: column;
}
.contentInfoWrap .el-table__body-wrapper {
  order: 1;
}
.contentInfoWrap .el-table__fixed-body-wrapper {
  top: 97px !important;
}
.contentInfoWrap .el-table__fixed-footer-wrapper {
  z-index: 0;
  top: 50px;
}

方法二：通過DOM操作將合計行放置到首行

在mounted中調用該方法即可

showSummariesPosition() {
      const table = document.querySelector('.customTable') // customTable這個是在el-table定義的類名
      const footer = document.querySelector(
        '.customTable .el-table__footer-wrapper'
      )
      const body = document.querySelector(
        '.customTable .el-table__body-wrapper'
      )
      table.removeChild(footer) // 移除表格最下方的合計行
      table.insertBefore(footer, body) // 把合計行插入到表格body的上面
    },

3. 合計行的數(shù)據

getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = 'Total(銷量)'
          return
        }
        const values = data.map((item) => Number(item[column.property]))
        if (!values.every((value) => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          sums[index] += ' '
        } else {
          sums[index] = ' '
        }
      })
      return sums
    },

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

  • vue實現(xiàn)滑動驗證條

    vue實現(xiàn)滑動驗證條

    這篇文章主要為大家詳細介紹了vue實現(xiàn)滑動驗證條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue獲取v-for異步數(shù)據dom的解決問題

    vue獲取v-for異步數(shù)據dom的解決問題

    這篇文章主要介紹了vue獲取v-for異步數(shù)據dom的解決問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2023-03-03
  • vue+springboot圖片上傳和顯示的示例代碼

    vue+springboot圖片上傳和顯示的示例代碼

    這篇文章主要介紹了vue+springboot圖片上傳和顯示的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-02-02
  • 聊聊vue生命周期鉤子函數(shù)有哪些,分別什么時候觸發(fā)

    聊聊vue生命周期鉤子函數(shù)有哪些,分別什么時候觸發(fā)

    這篇文章主要介紹了聊聊vue生命周期鉤子函數(shù)有哪些，分別什么時候觸發(fā)？具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • vue實現(xiàn)簡單全選和反選功能

    vue實現(xiàn)簡單全選和反選功能

    這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單全選和反選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-09-09
  • vue/cli和vue版本對應及安裝方式

    vue/cli和vue版本對應及安裝方式

    這篇文章主要介紹了vue/cli和vue版本對應及安裝方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Vue實戰(zhàn)之掌握自定義指令

    Vue實戰(zhàn)之掌握自定義指令

    作為使用Vue的開發(fā)者，我們對Vue指令一定不陌生，諸如v-model、v-on、v-for、v-if等，同時Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時間開心的摸魚
    2022-11-11
  • vue3中路由傳參query、params及動態(tài)路由傳參詳解

    vue3中路由傳參query、params及動態(tài)路由傳參詳解

    vue3中的傳參方式和vue2中一樣,都可以用query和params傳參,下面這篇文章主要給大家介紹了關于vue3中路由傳參query、params及動態(tài)路由傳參的相關資料,需要的朋友可以參考下
    2022-09-09
  • vue實現(xiàn)按鈕的長按功能

    vue實現(xiàn)按鈕的長按功能

    這篇文章主要介紹了vue實現(xiàn)按鈕的長按功能,點擊按鈕實現(xiàn)長按，用戶需要按下按鈕幾秒鐘，然后觸發(fā)相應的事件，本文通過實例代碼給大家分享實現(xiàn)思路，感興趣的朋友一起看看吧
    2022-01-01
  • Vue 進階之路（三）

    Vue 進階之路（三）

    這篇文章主要介紹了Vue 進階之路，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-04-04

最新評論