vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-input v-model="search" placeholder="请输入关键词"></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          :data="filteredData.slice((currentPage-1)*pageSize,currentPage*pageSize)"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="date"
            label="日期"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="address"
            label="地址">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="filteredData.length">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      search: '',
      currentPage: 1,
      pageSize: 10,
      multipleSelection: [],
      tableData: [
        // ... 填充你的数据
      ],
    };
  },
  computed: {
    filteredData() {
      const search = this.search && this.search.toLowerCase();
      const filteredData = search ? this.tableData.filter(data => {
        return Object.keys(data).some(key => {
          return String(data[key]).toLowerCase().includes(search);
        });
      }) : this.tableData;
      return filteredData;
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
}
</script>

这个代码实例提供了一个简化的Vue组件，它包含了下拉表格多选、搜索、分页和数据回显的功能。它使用了计算属性来实现搜索功能，并且使用了el-pagination组件来实现分页功能。代码示例中的tableData需要替换为实际的数据。