通过jquery来进行“批量操作”表格中内容
作为一个职场小白，那就是遇到问题，多百度，多总结，多分享。今天，我遇到了这个小问题：点击按钮，拿到被选中项的id，以数组的形式返回出来。下面 上 例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ElementUI组件</title>
<script src="../js/vue.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="../js/jquery_3.5.1_jquery.min.js"></script>
</head>
<body>
<div id="app">
<el-button onclick="tan()" type="primary" >弹出被选中的序号</el-button>
<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" label="xuhao">
</el-table-column>
<el-table-column type="index" width="50" label="序号">
</el-table-column>
<el-table-column label="日期" width="120">
<template slot-scope="scope">{ { scope.row.date }}</template>
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址" show-overflow-tooltip>
</el-table-column>
</el-table>
</div>
<script>
var vm = new Vue({
el: "#app",
data() {
return {
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
multipleSelection: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
})
function tan(){
var arr = $(".el-checkbox__original");
var piliangIds = [];
arr. each(i,el){
if($(el).prop("checked")){
var id = arr.parent().parent().parent().parent().next().text();
piliangIds.push(id)
}
console.log("批量操作的ids-----------",piliangIds)
}
}
</script>
</body>
</html>
如有问题，及时评论，谢谢。
