vue + ElementUI实现表格的添加行、删除行
程序员文章站
2022-06-07 22:41:21
...
添加行
<el-table
:data="formData.dataList"
class="tb"
border
height="250"
:row-class-name="tableRowClassName"
@row-click="onRowClick"
highlight-current-row
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
align="center"
fixed="left"
width="55"
></el-table-column>
<el-table-column
type="index"
label="序号"
align="center"
width="90">
<template slot-scope="scope">
<span>{{scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column
v-if="show"
prop="guid"
label="主键"
align="center"
width="80">
<template slot-scope="scope">
<el-input
v-model="scope.row.guid"
placeholder="主键"
readonly
>
</el-input>
</template>
</el-table-column>
<el-table-column
v-if="show"
prop="userName"
label="用户名称"
align="center"
min-width="120">
<template slot-scope="scope">
<el-input
v-model.trim="scope.row.userName"
placeholder="请输入用户名称"
@change="handleChange"
>
</el-input>
</template>
</el-table-column>
<el-table-column
prop="account"
label="账号"
align="center"
min-width="120">
<template slot-scope="scope">
<el-input
v-model.trim="scope.row.account"
placeholder="请输入绑定账号"
@change="handleChange"
>
</el-input>
</template>
</el-table-column>
</el-table>
添加行方法
// 添加行的索引
tableRowClassName ({row, rowIndex}) {
row.index = rowIndex
console.log('row.index: ' + row.index)
}
删除行方法
// 行点击消除new标记
onRowClick (row, event, column) {
this.currentRow = row.index
console.log('row.index----' + this.currentRow)
},
// 删除单行表格数据
delGrid () {
let index = this.currentRow
console.log('index: ------------' + index)
if (index === null) {
this.$alert('<span style="font-size: 20px;font-family: \'宋体\';font-weight: 700;">请选中要删除的记录!</span>', '消息', {
dangerouslyUseHTMLString: true,
type: 'warning'
})
} else {
this.formData.dataList.splice(index, 1)
this.$alert('<span style="font-size: 20px;font-family: \'宋体\';font-weight: 700;">删除成功!</span>', '消息', {
dangerouslyUseHTMLString: true,
type: 'success'
})
}
推荐阅读
-
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
-
Vue+Element实现表格编辑、删除、以及新增行的最优方法
-
vue elementUI table表格数据 滚动懒加载的实现方法
-
Vue.js实现表格动态增加删除的方法(附源码下载)
-
Vue.js实现的表格增加删除demo示例
-
Vue2.0+ElementUI实现表格翻页的实例
-
Vue+elementui 实现复杂表头和动态增加列的二维表格
-
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
-
Vue2.0+ElementUI+PageHelper实现的表格分页功能
-
vue+element的表格实现批量删除功能示例代码