vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
1.表格动态添加，也可删除
<template>
<div class="TestWord">
<el-button @click="addLine">添加行数</el-button>
<el-button @click="save">保存</el-button>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column prop="bookname" label="书名">
<template slot-scope="scope">
<el-input v-model="scope.row.bookname" placeholder="书名"></el-input>
</template>
</el-table-column>
<el-table-column prop="bookvolume" label="册数">
<template slot-scope="scope">
<el-input v-model="scope.row.bookvolume" placeholder="册数"></el-input>
</template>
</el-table-column>
<el-table-column prop="bookbuyer" label="购买者">
<template slot-scope="scope">
<el-input v-model="scope.row.bookbuyer" placeholder="购买者"></el-input>
</template>
</el-table-column>
<el-table-column prop="bookborrower" label="借阅者">
<template slot-scope="scope">
<el-input v-model="scope.row.bookborrower" placeholder="借阅者"></el-input>
</template>
</el-table-column>
<el-table-column prop="bookbuytime" label="购买日期">
<template slot-scope="scope">
<el-date-picker
v-model="scope.row.bookbuytime"
type="date"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
placeholder="购买日期">
</el-date-picker>
</template>
</el-table-column>
<el-table-column prop="bookbuytime" label="购买日期">
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
v-if="!scope.row.editing"
icon="el-icon-delete"
@click="handleDelete(scope.$index, scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
vuejs 代码
export default {
name:'TestWorld',
data() {
return {
tableData:[{
bookname: '',
bookbuytime: '',
bookbuyer: '',
bookborrower: '',
bookvolume:''
}]
}
},
methods:{
addLine(){ //添加行数
var newValue = {
bookname: '',
bookbuytime: '',
bookbuyer: '',
bookborrower: '',
bookvolume:''
};
//添加新的行数
this.tableData.push(newValue);
},
handleDelete(index){ //删除行数
this.tableData.splice(index, 1)
},
save(){
//这部分应该是保存提交你添加的内容
console.log(JSON.stringify(this.tableData))
}
}
}
运行图片
2.编辑表格 （即使input已经修改过，当点击取消时，内容不会变）
<template>
<div class="TestWorld">
<el-button @click="savemodify">保存</el-button>
<el-table
:data="modifyData"
style="width: 100%">
<el-table-column prop="bookname" label="书名">
<template slot-scope="scope">
<template v-if="scope.row.editing">
<el-input class="edit-input" v-model="scope.row.bookname" placeholder="书名"></el-input>
</template>
<span v-else>{{ scope.row.bookname }}</span>
</template>
</el-table-column>
<el-table-column prop="bookvolume" label="册数">
<template slot-scope="scope">
<template v-if="scope.row.editing">
<el-input class="edit-input" v-model="scope.row.bookvolume" placeholder="册数"></el-input>
</template>
<span v-else>{{ scope.row.bookvolume}}</span>
</template>
</el-table-column>
<el-table-column prop="bookbuyer" label="购买者">
<template slot-scope="scope">
<template v-if="scope.row.editing">
<el-input class="edit-input" v-model="scope.row.bookbuyer" placeholder="购买者"></el-input>
</template>
<span v-else>{{scope.row.bookbuyer}}</span>
</template>
</el-table-column>
<el-table-column prop="bookborrower" label="借阅者">
<template slot-scope="scope">
<template v-if="scope.row.editing">
<el-input class="edit-input" v-model="scope.row.bookborrower" placeholder="借阅者"></el-input>
</template>
<span v-else>{{scope.row.bookborrower}}</span>
</template>
</el-table-column>
<el-table-column prop="bookbuytime" label="购买日期">
<template slot-scope="scope">
<template v-if="scope.row.editing">
<el-date-picker
v-model="scope.row.bookbuytime"
type="date"
value-format="yyyy-MM-dd"
placeholder="购买日期">
</el-date-picker>
</template>
<span v-else>{{scope.row.bookbuytime}}</span>
</template>
</el-table-column>
<el-table-column prop="editing" label="操作">
<template slot-scope="scope">
<el-button
type="danger"
v-if="!scope.row.editing"
icon="el-icon-delete"
v-model="scope.$index"
@click="handleEdit(scope.$index, scope.row)">编辑
</el-button>
<el-button
v-else
type="danger"
icon="el-icon-delete"
v-model="scope.$index"
@click="handleCancle(scope.$index, scope.row)">取消
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
vuejs 代码
export default {
name:'TestWorld',
data() {
return {
modifyData:[],
prevValue:{}
}
},
mounted(){
this.getData()
},
methods:{
getData(){
this.$ajax({
method: 'get',
url:'../static/json/1.1.1.json', //<---本地地址
//url: '/api/drummer/8bd17859',
}).then((response)=>{
console.log(JSON.stringify(response.data))
let _data = response.data;
let datalength = _data.length;
for(let i = 0;i < datalength; i++){
this.$set(_data[i], 'editing', false)
}
//赋值
this.modifyData = _data;
}).catch(function(err){
console.log(err)
})
},
handleEdit(index,row){
row.editing = true;
console.log(index)
this.prevValue = JSON.parse(JSON.stringify(row));
},
handleCancle(index,row){
row.editing = false;
let prevContent = this.prevValue.bookname;
this.$set(row,"bookname",prevContent);
},
savemodify(){
console.log(JSON.stringify(this.modifyData))
}
}
}
本地的1.1.1.JSON数据
[{"bookname":"普通高等教育物联网工程专业规划用书：物联网技术概论","bookbuytime": "2016-05-04","bookbuyer": "李晓月","bookborrower": "王小虎","bookvolume":"1"},{"bookname":"区块链革命：比特币底层技术如何改变货币、商业和世界","bookbuytime": "2016-05-04","bookbuyer": "李晓月","bookborrower": "李小虎","bookvolume":"1"},{"bookname":"大家一起学配色：数学色彩设计全能书","bookbuytime": "2017-12-04","bookbuyer": "张晓月","bookborrower": "王而虎","bookvolume":"1"}]
如果不用get本地数据，vuejs如下
export default {
name:'TestWorld',
data() {
return {
modifyData:[
{
bookname: '普通高等教育物联网工程专业规划用书：物联网技术概论',
bookbuytime: '2016-05-04',
bookbuyer: '李晓月',
bookborrower: '王小虎',
bookvolume: '1',
editing: false
},
{
bookname: '区块链革命：比特币底层技术如何改变货币、商业和世界',
bookbuytime: '2016-05-04',
bookbuyer: '李晓月',
bookborrower: '李小虎',
bookvolume: '1',
editing: false
},
{
bookname: '大家一起学配色：数学色彩设计全能书',
bookbuytime: '2017-12-04',
bookbuyer: '张晓月',
bookborrower: '王而虎',
bookvolume: '1',
editing: false
}
],
prevValue:{}
}
},
methods:{
handleEdit(index,row){ //编辑
row.editing = true;
console.log(index)
this.prevValue = JSON.parse(JSON.stringify(row));
},
handleCancle(index,row){ //取消
row.editing = false;
let prevContent = this.prevValue.bookname;
this.$set(row,"bookname",prevContent);
},
savemodify(){
console.log(JSON.stringify(this.modifyData))
}
}
}
运行图
3.批量删除行数
<template>
<div class="TestWorld">
<el-table ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="batchDelete">批量删除</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
</div>
</template>
vuejs 代码
export default {
name:'TestWorld',
data() {
return {
tableData3: [
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},{
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},{
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods:{
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
batchDelete(){
let multData = this.multipleSelection;
let tableData =this.tableData3;
let multDataLen = multData.length;
let tableDataLen = tableData.length;
for(let i = 0; i < multDataLen ;i++){
for(let y=0;y < tableDataLen;y++){
if(JSON.stringify(tableData[y]) == JSON.stringify(multData[i])){ //判断是否相等，相等就删除
this.tableData3.splice(y,1)
console.log("aa")
}
}
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
有关验证的代码，看上面，持续更新~
以上这篇vuejs element table 表格添加行,修改,单独删除行,批量删除行操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。
相关推荐
-
vue+element实现表格新增、编辑、删除功能
几天前,需要做一个需求:新增一个xml文件时,添加数量不确定.属性相同的xml标签,想了想可以用表格做啊,属性相同,使用统一的表头,下面的属性值只是进行增删改不就行了,就类似于mysql给表里填数据一样. 可是目前似乎还没有表格的直接增删改一行的操作,那要怎么实现呢?于是,通过上网以及自己的思考,终于实现了,代码.思路以及效果图如下: 1 html部分: <el-button type="success" @click="addRow(tableData)"&
-
Element-UI中关于table表格的那些骚操作(小结)
最近的项目中使用到element-ui组件库,由于做的是后台管理系统,所以经常需要操作表格,编辑样式的过程中遇到一些问题,官网针对table给出了很多的api,自己可以自定义,基本能满足产品需求,但是没有给出具体的案例,网上的资料也比较简略,这里简单整理下一些常用的操作,如果有类似的功能可以做一个参考. 具体的使用方法还是建议仔细阅读官网-table章节: https://element.eleme.cn/#/zh-CN/component/table#table-column-scoped-s
-
Vue+Element实现表格编辑、删除、以及新增行的最优方法
之前已经实现了表格的新增.编辑和删除,在我的上篇文章中写的也比较详细.但是总感觉有点不完美,首先新增了一行以后,必须要双击某一个单元格参能进行内容的输入.从代码上来说,代码量也较大:而且使用的是原生的html标签,有点尴尬. 于是,进一步研以后,进行了一定的优化,直接使用vue的代码实现,不仅大大减少了代码量,还实现了操作的友好性.下面直接上代码: 1 html部分 这次的优化其实主要在于html部分,直接将vue的el-input标签或者el-select标签放入表格的每个单元格中.这样就不用
-
vue+element-ui实现表格编辑的三种实现方式
1.表格内部显示和编辑切换 这种方式就是利用两个标签显示隐藏来实现,我们这里用input和span,正常用span将数据显示,点击编辑时,将span隐藏,显示input进行编辑.选中当前行我们可以通过slot-scope中的index去实现,在控制显示隐藏的属性上绑定index就可以选中当前行了,如showEdit[index]. 页面结构代码: <el-table :data="tableData" tooltip-effect="dark" style=&
-
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
1.表格动态添加,也可删除 <template> <div class="TestWord"> <el-button @click="addLine">添加行数</el-button> <el-button @click="save">保存</el-button> <el-table :data="tableData" style="wid
-
vue element table 表格请求后台排序的方法
1.ElementUi文档已经说了,如果需要后端排序,需将sortable设置为custom,同时在 Table 上监听sort-change事件,在事件回调中可以获取当前排序的字段名和排序顺序,从而向接口请求排序后的表格数据. <el-table :data="playerTableData" border style="width: 100%" :default-sort = "{prop: 'outlay', order: 'descendin
-
vue+element table表格实现动态列筛选的示例代码
需求:在用列表展示数据时,出现了很多项信息需要展示导致表格横向特别长,展示就不够明晰,用户使用起来可能会觉得抓不住自己的重点. 设想实现:用户手动选择表格的列隐藏还是展示,并且记录用户选择的状态,在下次进入该时仍保留选择的状态. 效果图如下: 原: 不需要的关掉默认的勾选: 实现代码: HTML部分就是用一个多选框组件展示列选项 用v-if="colData[i].istrue"控制显示隐藏,把列选项传到checkbox里再绑定勾选事件. <el-popover placemen
-
element Table表格组件多字段(多列)排序方法
目录 需求: 遇到的问题: 解决: 需求: element表格多列排序,点击日期的排序,然后再点击姓名的排序,将两个排序字段传给后端排序 遇到的问题: element的Table组件只支持单列排序,当你点击另一列的排序的时候,会自动取消上一个排序.网上搜了一下方法,这篇文章提出用:header-cell-class-name 和 @sort-change来处理多列排序的样式问题,我试了半天,发现这个sort-change事件在取消排序的时候会返回null,使我根本定位不到是哪一列取消了排序,总而
-
vue element table表格相同名称列合并方式
目录 element table表格相同名称列合并 对table表格相同内容行的合并 element table表格相同名称列合并 <template> <div> <el-table show-summary :summary-method="getSummaries" :span-method="objectSpanMethod" :data="tableData" row-key="id"
-
element table 表格控件实现单选功能
项目中实现 table 表格控件单选功能,如图: 基本代码如下: 1.template 代码中: <el-table :data="tableData" border stripe ref="tableData" @row-click="singleElection"> <el-table-column label="" width="65"> <template slot-s
-
封装Vue Element的table表格组件的示例详解
在封装Vue组件时,我依旧会交叉使用函数式组件的方式来实现.关于函数式组件,我们可以把它想像成组件里的一个函数,入参是渲染上下文(render context),返回值是渲染好的HTML(VNode).它比较适用于外层组件仅仅是对内层组件的一次逻辑封装,而渲染的模板结构变化扩展不多的情况,且它一定是无状态.无实例的,无状态就意味着它没有created.mounted.updated等Vue的生命周期函数,无实例就意味着它没有响应式数据data和this上下文. 我们先来一个简单的Vue函数式组件
-
Vue ELement Table技巧表格业务需求实战示例
目录 前言 常见业务 需求:合并行 思路分析 需求合并列 思路分析 前言 在我们日常开发中,表格业务基本是必不可少的,对于老手来说确实简单,家常便饭罢了,但是对于新手小白如何最快上手搞定需求呢?本文从思路开始着手,帮你快速搞定表格. 常见业务 需求:合并行 1. 合并条码一样的两行 2. 触摸高亮关闭,表格颜色重一点 思路分析 调取element Table的回调 通过给table传入span-method方法可以实现合并行或列,方法的参数是一个对象,里面包含当前行row.当前列column.当
-
Element实现表格嵌套、多个表格共用一个表头的方法
一.分析需求 这里先上一张图说明 需求 : 根据后端返回的数据 ( res 是一个数组,它的元素是一个对象,对象里面的 ext 属性是一个对象,它又包含了, default . free 和 pay 三个属性,且这三个都是数组格式.): 渲染出一个这样子的 表格 : res 数据: res 的每一个元素的直接属性 name (即为邮费模板名称,比如成都运费模板), res 的 ext 属性下的三个数组 default . free . pay ,每一个数组要大的一行(这一行中,第一列是运送到的地
-
vuejs+element UI table表格中实现禁用部分复选框的方法
有时候我们构建这样带一列复选框的表格 然后希望根据条件禁用某个列表项的选择框,可以这样写 HTML: JS: 以上这篇vuejs+element UI table表格中实现禁用部分复选框的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.