vue+element-ui多选和按钮绑定并将值传往后端
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
·
遇到这样一个需求,就是选择若干条数据后对他们进行批量操作,并与后台关联
页面代码
<div style="margin-top: 20px">
<el-button @click="speedupCheckbox" @current-change="handleSelectionChange">上线</el-button>
</div>
js代码
onlineUser () {
this.$confirm('此操作将无法撤回, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let arr = this.multipleSelection
let multis = []
for (let i = 0; i < arr.length; i++) {
multis.push(arr[i].username)
console.log(multis)
}
axios({
method: 'POST',
url: Config.context + 'url',
data: {
users: multis // 此项为传往后端的数据
}
}).then(rs => {
if (multis.length !== null) {
this.$message.success('操作成功')
} else {
this.$message.error('操作失败')
}
console.log(rs)
})
this.$refs.multipleTable.clearSelection() // 操作完成清除勾选框
}).catch(() => {
this.$message({
type: 'info',
message: '已取消操作'
})
})
},
// 选择框
speedupCheckbox: function () {
if (this.multipleSelection.length === 0) {
this.$message({
message: '请至少勾选一项,再进行操作',
type: 'warning'
})
} else {
this.onlineUser()
}
}
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
1 年前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 1 年前
新一代开源开发者平台 GitCode,通过集成代码托管服务、代码仓库以及可信赖的开源组件库,让开发者可以在云端进行代码托管和开发。旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。
更多推荐

所有评论(0)