vue el-table 動(dòng)態(tài)添加行與刪除行的實(shí)現(xiàn)
更新時(shí)間：2022年07月26日 10:50:04 作者：＊且聽(tīng)風(fēng)吟
這篇文章主要介紹了vue el-table 動(dòng)態(tài)添加行與刪除行的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
el-table 動(dòng)態(tài)添加行與刪除行
項(xiàng)目中有需要?jiǎng)討B(tài)添加和刪除 el-table 行的需要，就學(xué)習(xí)了下，發(fā)現(xiàn)很簡(jiǎn)單：
<template>
? <el-dialog
? ? width="50%"
? ? :visible.sync="isShow"
? ? :before-close="beforeClose"
? ? title="自定義設(shè)備類型屬性">
? ? <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 方法便可實(shí)現(xiàn)動(dòng)態(tài)添加行和刪除行。
原理：vue是數(shù)據(jù)驅(qū)動(dòng) dom 進(jìn)行渲染，所以改變 el-table 綁定的數(shù)組，就可以改變 el-table。
點(diǎn)擊“添加”按鈕就給數(shù)組添加一行數(shù)據(jù)，從而表格也會(huì)新增一行，點(diǎn)擊“刪除”按鈕就刪除數(shù)組當(dāng)前的這一行數(shù)據(jù)，從而表格刪除當(dāng)前行。
el-table 合計(jì)行放在首行
效果如圖所示
首先在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="活動(dòng)月"></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.定義合計(jì)行的位置和樣式
方法一：通過(guò)css 控制
// 合計(jì)行樣式
.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;
}方法二：通過(guò)DOM操作將合計(jì)行放置到首行
在mounted中調(diào)用該方法即可
showSummariesPosition() {
const table = document.querySelector('.customTable') // customTable這個(gè)是在el-table定義的類名
const footer = document.querySelector(
'.customTable .el-table__footer-wrapper'
)
const body = document.querySelector(
'.customTable .el-table__body-wrapper'
)
table.removeChild(footer) // 移除表格最下方的合計(jì)行
table.insertBefore(footer, body) // 把合計(jì)行插入到表格body的上面
},3. 合計(jì)行的數(shù)據(jù)
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
},以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能
這篇文章主要給大家介紹了Vue實(shí)現(xiàn)訂單支付倒計(jì)時(shí)功能,倒計(jì)時(shí)這要運(yùn)用在創(chuàng)建訂單后15分鐘內(nèi)進(jìn)行支付,否則訂單取消,本文結(jié)合示例代碼給大家詳細(xì)講解,需要的朋友可以參考下2023-08-08
Nginx部署前端Vue項(xiàng)目的步驟、常見(jiàn)問(wèn)題與解決方案
在現(xiàn)代Web開(kāi)發(fā)中,Vue.js成為前端開(kāi)發(fā)者構(gòu)建單頁(yè)應(yīng)用的熱門框架,Nginx以其高性能和穩(wěn)定性,成為部署Vue項(xiàng)目的理想選擇,這篇文章主要介紹了Nginx部署前端Vue項(xiàng)目的步驟、常見(jiàn)問(wèn)題與解決方案,需要的朋友可以參考下2024-09-09
Vue的實(shí)例、生命周期與Vue腳手架（vue-cli）實(shí)例詳解
本文通過(guò)實(shí)例代碼+圖片描述的形式給大家介紹了Vue的實(shí)例、生命周期與Vue腳手架（vue-cli）知識(shí),需要的朋友可以參考下2017-12-12
Vue3實(shí)現(xiàn)pdf在線預(yù)覽的三種方式
這篇文章主要為大家詳細(xì)介紹了使用Vue3實(shí)現(xiàn)pdf在線預(yù)覽的三種常用方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2025-02-02
vue中swiper?vue-awesome-swiper的使用方法及各種坑解決
這篇文章主要介紹了vue中swiper?vue-awesome-swiper的使用方法及各種坑解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要介紹了如何在?vue?中使用?svg?symbols，本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08
vue-cli 3 全局過(guò)濾器的實(shí)例代碼詳解
這篇文章主要介紹了vue-cli 3 全局過(guò)濾器的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue3使用拖拽組件draggable.next的保姆級(jí)教程
做項(xiàng)目的時(shí)候遇到了一個(gè)需求,拖拽按鈕到指定位置，添加一個(gè)輸入框,這篇文章主要給大家介紹了關(guān)于vue3使用拖拽組件draggable.next的保姆級(jí)教程,需要的朋友可以參考下2023-06-06
解決antd日期選擇組件,添加value就無(wú)法點(diǎn)擊下一年和下一月問(wèn)題
這篇文章主要介紹了解決antd日期選擇組件,添加value就無(wú)法點(diǎn)擊下一年和下一月問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
這篇文章主要介紹了vue-cli 如何打包上線的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05