adv-table 表格

封装于 el-table 和 el-pagination 组件，在不破坏其原有功能基础上,解决表格样板代码过多问题。

渲染表头方式

普通渲染表头

<template>
  <adv-table :source="data" :headers="headers" style="width: 100%">
    <el-table-column prop="name" label="姓名"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
    <el-table-column label="格式化" width="120" align="center">
      <template slot-scope="scope">
        <span>{{ scope.row.name }}test</span>
      </template>
    </el-table-column>
  </adv-table>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            name: '姓名1',
            address: '地址1',
          },
          {
            name: '姓名2',
            address: '地址2',
          },
          {
            name: '姓名3',
            address: '地址3',
          },
          {
            name: '姓名4',
            address: '地址4',
          },
          {
            name: '姓名5',
            address: '地址5',
          },
        ],
      }
    },
  }
</script>

Expand Copy Copy

通过 Headers 控制表头

<template>
  <adv-table :source="data" :headers="headers" style="width: 100%"> </adv-table>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            name: '姓名1',
            address: '地址1',
          },
          {
            name: '姓名2',
            address: '地址2',
          },
          {
            name: '姓名3',
            address: '地址3',
          },
          {
            name: '姓名4',
            address: '地址4',
          },
          {
            name: '姓名5',
            address: '地址5',
          },
        ],
        headers: [
          {
            label: '姓名',
            prop: 'name',
          },
          {
            label: '地址',
            prop: 'address',
          },
          {
            label: '格式化',
            prop: 'formatName',
            width: 120,
            align: 'center',
            format: function (val) {
              return val.name + 'test'
            },
          },
        ],
      }
    },
  }
</script>

Expand Copy Copy

数据来源为数组

用于手动控制数据输入

<template>
  <adv-table :source="data" style="width: 100%">
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </adv-table>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            name: '姓名1',
            address: '地址1',
          },
          {
            name: '姓名2',
            address: '地址2',
          },
          {
            name: '姓名3',
            address: '地址3',
          },
          {
            name: '姓名4',
            address: '地址4',
          },
          {
            name: '姓名5',
            address: '地址5',
          },
        ],
      }
    },
  }
</script>

Expand Copy Copy

数据来源为请求方法

用于自动请求

暂无数据

<template>
  <div>
    <adv-table :source="load" style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </adv-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            name: '姓名1',
            address: '地址1',
          },
          {
            name: '姓名2',
            address: '地址2',
          },
          {
            name: '姓名3',
            address: '地址3',
          },
          {
            name: '姓名4',
            address: '地址4',
          },
          {
            name: '姓名5',
            address: '地址5',
          },
        ],
      }
    },
    methods: {
      load() {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({
              content: this.data,
              totalCount: 20,
              totalPage: 300,
            })
          }, 500)
        })
      },
    },
  }
</script>

Expand Copy Copy

用于手动请求

暂无数据

<template>
  <div>
    <adv-table :source="load" style="width: 100%" ref="table" :auto="false">
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
      <template slot="footer">
        <el-button @click="refresh">获取数据</el-button>
      </template>
    </adv-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            name: '姓名1',
            address: '地址1',
          },
          {
            name: '姓名2',
            address: '地址2',
          },
          {
            name: '姓名3',
            address: '地址3',
          },
          {
            name: '姓名4',
            address: '地址4',
          },
          {
            name: '姓名5',
            address: '地址5',
          },
        ],
      }
    },
    methods: {
      load() {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({
              content: this.data,
              totalCount: 20,
              totalPage: 300,
            })
          }, 500)
        })
      },
      refresh() {
        this.$refs.table.refresh()
      },
    },
  }
</script>

Expand Copy Copy

用于手动触发加载更多

暂无数据

<template>
  <adv-table :source="load" style="width: 100%" :isManual="true">
    <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
    <el-table-column prop="address" label="地址"> </el-table-column>
  </adv-table>
</template>

<script>
  export default {
    data() {
      return {
        data: [
          {
            name: '姓名1',
            address: '地址1',
          },
          {
            name: '姓名2',
            address: '地址2',
          },
          {
            name: '姓名3',
            address: '地址3',
          },
          {
            name: '姓名4',
            address: '地址4',
          },
          {
            name: '姓名5',
            address: '地址5',
          },
        ],
      }
    },
    methods: {
      load() {
        return new Promise((resolve) => {
          setTimeout(() => {
            resolve({
              content: this.data,
              totalCount: 20,
              totalPage: 300,
            })
          }, 500)
        })
      },
    },
  }
</script>

Expand Copy Copy