话不多说，先上ElementUI的部分表格html代码：
<el-table
ref="multipleTable"
:data="musics"
tooltip-effect="dark"
>
<el-table-column
type="selection"
width="45">
</el-table-column>
<el-table-column
label="编号"
width="50"
prop="musicId">
</el-table-column>
<el-table-column
label="歌曲名字"
width="auto"
prop="musicName">
</el-table-column>
<el-table-column
prop="musicAlbumName"
label="专辑名字"
width="auto"
>
</el-table-column>
<el-table-column
prop="musicMp3Url"
label="歌曲URL"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="musicAlbumPicUrl"
label="专辑URL"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="musicArtistName"
label="歌手"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="date"
label="创建日期"
:formatter="dateSwitch"
width="auto"
>
</el-table-column>
<el-table-column
label="操作"
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 = music
this.updateDialogVisible = true;
},
//删除
del(musicId){
let that = this
this.$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>