vueel-table动态添加行与删除行的实现
目录
el-table 动态添加行与删除行
el-table 合计行放在首行
首先在el-table ,添加属性
2.定义合计行的位置和样式
3. 合计行的数据
el-table 动态添加行与删除行项目中有需要动态添加和删除 el-table 行的需要，就学习了下，发现很简单：
<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 方法便可实现动态添加行和删除行。
原理：vue是数据驱动 dom 进行渲染，所以改变 el-table 绑定的数组，就可以改变 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. 合计行的数据
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
},
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。
