elementUI Table数据上移下移操作
基于VUE+elementUI的Table数据上移下移一.使用方法利用scope获取表格每行的数据和索引scope.$index 该行数据的索引(index相当于table.data[index])scope.row为该行数据的内容二、具体代码实现1.渲染table<el-tableref="maplayertable":data="tableD...
·
基于VUE+elementUI的Table数据上移下移
一.使用方法
利用scope获取表格每行的数据和索引
scope.$index 该行数据的索引(index相当于table.data[index])
scope.row为该行数据的内容
二、具体代码实现
1.渲染table
<el-table
ref="maplayertable"
:data="tableData.data"
tooltip-effect="dark"
v-loading="loading">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="cname"
label="图层名称"
width="255">
</el-table-column>
<el-table-column
prop="cname"
label="创建时间"
width="255">
<template slot-scope="scope">
{{formatTime(scope.row.createTime)}}
</template>
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="255">
//使用scope插槽,获取行数据
<template slot-scope="scope">
<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
<el-button type="text" size="small" @click="deleEqDialog(scope.row)">编辑</el-button>
<el-button type="text" size="small" @click="upLayer(scope.$index,scope.row)">上移</el-button>
<el-button type="text" size="small" @click.native.prevent="downLayer(scope.$index,scope.row)">下移</el-button>
</template>
</el-table-column>
</el-table>
2.获取本行id和上一行的id,访问后台接口,调换顺序,后刷新表格
//上移图层数据
upLayer: function (index, row) {
if (index == 0) {
this.$message({
message: '处于顶端,不能继续上移',
type: 'warning'
});
} else {
var that = this;
let param = {};
param.ename1 = row.ename;//该行数据id
param.ename2 = that.tableData.data[index - 1].ename; //上一行数据的id
//访问后台接口[传入两个调换的id值(此处ename1,2),有后台调换顺序,刷新数据]
this.$http.get('/', {params: param}).then(function (res) {
this.$message({
message: '上调成功',
type: 'success'
});
this.queryLayer();
}, function () {
console.log('请求失败处理');
});
}
},
更多推荐
已为社区贡献2条内容
所有评论(0)