通过jquery来进行“批量操作”表格中内容

╰+哭是因爲堅強的太久メ 2022-12-28 14:19 122阅读 0赞

### 通过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>

如有问题，及时评论，谢谢。