vue + ElementUI实现表格的添加行、删除行
vue + ElementUI实现表格的添加行、删除行添加行添加行方法删除行方法添加行<el-table:data="formData.dataList"class="tb"borderheight="250":row-class-name="tableRowClassName"@...
·
添加行
<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'
})
}
更多推荐
已为社区贡献2条内容
所有评论(0)