没有合适的资源?快使用搜索试试~ 我知道了~
Vue实现表格批量审核功能实例代码

温馨提示


试读
2页
主要为大家详细介绍了Vue实现表格批量审核功能实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
资源推荐
资源详情
资源评论












Vue实现表格批量审核功能实例代码实现表格批量审核功能实例代码
主要为大家详细介绍了Vue实现表格批量审核功能实例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了Vue实现表格批量审核功能的具体代码,供大家参考,具体内容如下
1 前端部分前端部分
效果如下图所示:
1.1 html部分
<el-form-item>
<el-button type="success" icon="el-icon-search" @click="auditServer()" :disabled="this.sels.length === 0">批量审核</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</el-form-item>
</br>
<el-table border :fit="true" ref="multipleTable" height="520" :data="listData" :highlight-current-row="true" size="small" @selection-change="selsChange" @row-click="handleChange">
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="applcd" label="微服务编码" show-overflow-tooltip width="130px" sortable fixed="left"></el-table-column>
<el-table-column prop="servcd" label="服务编码" show-overflow-tooltip width="130px" sortable fixed="left"></el-table-column>
</el-table>
代码说明:代码说明:
1)为table添加属性
@selection-change="selsChange" @row-click="handleChange"
2)添加一列 指定type为selection,表示该表格可选择
<el-table-column type="selection" width="55"></el-table-column>
3)当没有选择服务时,按钮不可选;
:disabled="this.sels.length === 0"
1.2 js部分
export default {
data () {
return {
sels:[],
methods: {
selsChange(sels) {
this.sels = sels
},
handleChange(row, event, column) {
this.$refs.multipleTable.toggleRowSelection(row)
},
auditServer () {
var servids = this.sels.map(item => item.servid).join(",")
var params = {
serverIds:servids
}
debugger
auditServer(params).then(
function (res) {
debugger
if(res.code === 200){
this.$message({
message: res.data,
type: 'success'
})
this.dialogFormVisible = false
}else{
this.$message({
message: '错误信息:'+res.message,
type: 'error'
});
}
this.loadData()
}.bind(this)
)
},
toggleSelection(){
this.$refs.multipleTable.clearSelection();
}
}
}
2 后端部分后端部分
2.1 mapper.xml

weixin_38659159
- 粉丝: 6
- 资源: 962
上传资源 快速赚钱
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


安全验证
文档复制为VIP权益,开通VIP直接复制

- 1
- 2
前往页