vue+elemenUI实现el-table-column行的上下移动
最后实现的效果,如图所示,第一行的向上按钮不可操作,最后一行的向下按钮为不可操作。其实 vue的很多操作并不是对页面数据的操作,而是对数据源的操作,数据源发生变化,实时渲染页面,这样就达到了,我们的需求。上代码:<el-table :key='tableKey' :data="detaillist" border fit highlight-current-row
·
最后实现的效果,如图所示,第一行的向上按钮不可操作,最后一行的向下按钮为不可操作。
其实 vue的很多操作并不是对页面数据的操作,而是对数据源的操作,数据源发生变化,实时渲染页面,这样就达到了,我们的需求。上代码:
<el-table :key='tableKey' :data="detaillist" border fit highlight-current-row style="width: 100%"> <el-table-column align="center" label="序号" width="65"> <template slot-scope="scope"> <span>{{ scope.$index + 1 }}</span> </template> </el-table-column> <el-table-column align="center" label="股道(号码)" width="145"> <template slot-scope="scope"> <span>{{scope.row.bztzdGdhm}}</span> </template> </el-table-column> <el-table-column align="center" label="操作"> <template slot-scope="scope"> <el-button size="mini" :disabled="scope.$index===0" @click="moveUp(scope.$index,scope.row)"><i class="el-icon-arrow-up"></i></el-button> <el-button size="mini" :disabled="scope.$index===(detaillist.length-1)" @click="moveDown(scope.$index,scope.row)"><i class="el-icon-arrow-down"></i></el-button> <el-button size="small" type="danger" @click="rowchilddel(scope.$index)"> 删除 </el-button> </template> </el-table-column> </el-table>
这是数据的list----------> detaillist: [],
//向上移动 moveUp(index, row) { var that = this; console.log('上移', index, row); console.log(that.detaillist[index]); if (index > 0) { let upDate = that.detaillist[index - 1]; that.detaillist.splice(index - 1, 1); that.detaillist.splice(index, 0, upDate); } else { alert('已经是第一条,不可上移'); } }, //向下移动 moveDown(index, row) { var that = this; console.log('下移', index, row); if ((index + 1) === that.detaillist.length) { alert('已经是最后一条,不可下移'); } else { console.log(index); let downDate = that.detaillist[index + 1]; that.detaillist.splice(index + 1, 1); that.detaillist.splice(index, 0, downDate); } },
更多推荐
已为社区贡献4条内容
所有评论(0)