element-ui表格多选

发布时间 2023-07-04 15:31:13作者: bruce_lee_1
<template>

          <el-table
            size="medium"
            v-loading="tableLoading"
            :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            stripe height="100%"
            @selection-change="handleSelectionChange">
          >
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
        

          </el-table>
      
</template>

<script>
  export default {
    name: "accountInfo",
    data() {
      return {
dataTable:[],
 tableLoading: false,
        totalPage: 30,
        pageSize: 10,
        currentPage: 1,
        multipleSelection:[]
      }

    },
    methods: {
      submit() {
        if (this.multipleSelection.length === 0) {
          this.$notify({
            message: '未选中内容',
            type: 'warning',
          });
          return;
        }
        var ids = this.multipleSelection.map((cur) => {
          return cur.id;
        });
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
   
      pageChange(currentPage) {
        this.currentPage = currentPage;
      },
     
    

    }
  }
</script>

<style scoped>
  .container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
  }

  .breadcrumb {

  }

  .content {
    flex: 1;

    padding: 3rem;
    overflow: hidden;

  }
  .box {
    width: 100%;
    height: calc(100% - 10rem);
  }
  .sub {
    height: 10rem;
  }
</style>