element table 分别循环表头，表内容，加搜索框、分页器功能

element table 分别循环表头，表内容，加搜索框、分页器功能

总结出来的 可直接复制粘贴

<template>
  <div class="con">
    <!-- 账面资产明细表 -->
    <div class="numbers-jia">
      <el-input
        v-model="search"
        placeholder="请输入查询内容"
        clearable
        class="tags"
      />
      <el-button type="primary" class="btn">搜索</el-button>
    </div>
    <el-table
      :data="tables.slice((currpage - 1) * pagesize, currpage * pagesize)"
      style="width: 100%"
      @row-click="openDetails"
    >
      <template v-for="item in cols">
        <el-table-column
          :key="item.id"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
        />
      </template>
    </el-table>
    <div class="block">
      <el-pagination
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Ledgerasset',
    components: {},
    data() {
      return {
        cols: [
          { label: '资产编码', prop: 'date', width: '100' },
          { label: '所属单位名称', prop: 'date1', width: '100' },
          { label: '自编号', prop: 'date2', width: '100' },
          { label: '备注', prop: 'date3', width: '100' },
          { label: '资产类别名称1-台账', prop: 'date4', width: '100' },
          { label: '资产类别-台账', prop: 'date5', width: '100' },
        ],
        // 查询
        search: '',
        // 表体数据
        tableData: [
          {
            id: '',
            date: 1,
            date1: 2,
            date2: 3,
            date3: '杭州',
            date4: '2021-01-05',
            date5: 4,
            date6: 5,
            date7: 6,
          },
          {
            id: '',
            date: 1,
            date1: 2,
            date2: 3,
            date3: '上海',
            date4: '2021-01-05',
            date5: 4,
            date6: 5,
            date7: 6,
          },
        ],
        totalresult: '',
        pagesize: 10,
        currpage: 1,
      }
    },
    computed: {
      tables() {
        const search = this.search
        if (search) {
          console.log('this.tableData', this.tableData)
          return this.tableData.filter((dataNews) => {
            return Object.keys(dataNews).some((key) => {
              return String(dataNews[key]).toLowerCase().indexOf(search) > -1
            })
          })
        }
        console.log('this.tableData', this.tableData)
        return this.tableData
      },
      total() {
        return this.tableData.length
      },
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
      // 表格点击事件
      openDetails(row) {
        console.log(row)
      },
      // 分页器按钮
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pagesize = val
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.currpage = val
      },
    },
  }
</script>
<style lang="scss" scoped>
  .con {
    padding: 20px;
    .numbers-jia {
      margin-bottom: 10px;
      .tags {
        margin-right: 10px;
        width: 15%;
      }
      .btn {
        width: 80px;
      }
    }
  }
</style>