1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > ElementUI表格如何获取当前行的数据?

ElementUI表格如何获取当前行的数据?

时间:2019-06-18 09:08:55

相关推荐

ElementUI表格如何获取当前行的数据?

话不多说,先上ElementUI的部分表格html代码:

<el-tableref="multipleTable":data="musics"tooltip-effect="dark"><el-table-columntype="selection"width="45"></el-table-column><el-table-columnlabel="编号"width="50"prop="musicId"></el-table-column><el-table-columnlabel="歌曲名字"width="auto"prop="musicName"></el-table-column><el-table-columnprop="musicAlbumName"label="专辑名字"width="auto"></el-table-column><el-table-columnprop="musicMp3Url"label="歌曲URL"show-overflow-tooltip></el-table-column><el-table-columnprop="musicAlbumPicUrl"label="专辑URL"show-overflow-tooltip></el-table-column><el-table-columnprop="musicArtistName"label="歌手"show-overflow-tooltip></el-table-column><el-table-columnprop="date"label="创建日期":formatter="dateSwitch"width="auto"></el-table-column><el-table-columnlabel="操作"show-overflow-tooltip><template slot-scope="scope"><el-button type="primary" size="min" plain @click="edit(scope.row)">编辑</el-button><el-button type="danger" size="min" plain @click="del(scope.row.musicId)">删除</el-button></template></el-table-column></el-table>

假如这时候表格中的数据是已经显示过的,要想拿到当前表格中指定行数的数据时,则需要在

template标签中添加这个属性即可 slot-scope=“scope” 同时写出一个点击事件的方法例如上述的编辑按钮

其中scope.row就是拿到当前行的所有数据,如果要想拿到制定数据,则需要指定你当前行指定需要的数据的字段就好,如:scope.row.musicId

<script>import moment from 'moment'export default {data() {return {music: {musicName: '',musicAlbumName: '',musicAlbumPicUrl: '',musicMp3Url: '',musicArtistName:'',date:'',musicId:'',},}methods: {//日期转换dateSwitch(row,column,currData){return moment(currData).format("YYYY-MM-DD")},//跳转页面toPage(currPage){// let that = this// this.axios.get("/music/findByPage?pageNum=" + currPage).then(function (respData) {//that.musics = respData.data.list,//that.currentPage = respData.data.pageNum//that.totalSize = respData.data.total// })this.axios.get("/music/findByPage?pageNum=" + currPage).then((respData) => {this.musics = respData.data.list,this.currentPage = respData.data.pageNum,this.totalSize = respData.data.total})},//编辑edit(music){this.music = musicthis.updateDialogVisible = true;},//删除del(musicId){let that = thisthis.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {this.$http("/music/deleteById?musicId=" + musicId).then(function (respDate) {if (respDate.data == "success") {that.$message({type: 'success',message: '删除成功!'});that.toPage(that.currentPage);} else {that.$message({type: 'error',message: '删除失败!'});that.toPage(that.currentPage);}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});}}</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。