grid 组件介绍

基本用法

暂无数据

共 0 条

• 15条/页
• 20条/页
• 30条/页
• 40条/页
• 50条/页

无数据

• 1

前往

页

<template>
  <div class="demo-block">
    <grid ref="grid" :remoteMethod="loadData">
      <el-table-column prop="name" label="名称"/>
      <el-table-column prop="age" label="年龄"/>
    </grid>
  </div>
</template>


<script>
export default {
  data() {
    return {
      form: {
        name: null
      },
      detailList: [
        {
          age: 18,
          name: '王小虎'
        },
        {
          age: 18,
          name: '王小虎'
        },
        {
          age: 18,
          name: '王小虎'
        },
        {
          age: 18,
          name: '王小虎'
        },
      ],
    };
  },
  mounted(){
    this.search()
  },
  methods: {
    loadData(params) {
      console.log(params)
      return {
        data: this.detailList,
        recordsCount: 30
      }
    },
    search(){
      this.$refs.grid.loadData(this.form)
    }
  }
};
</script>
<style scoped>
.demo-block {
  border: 1px solid #ebebeb;
  border-radius: 3px;
  padding: 8px;
}
</style>

Attributes

参数	说明	类型	默认值
remoteMethod	请求数据接口	Function	null
pageSize	分页大小	Number	20
pageSizes	每页显示个数选择器的选项设置	number[]	[15, 20, 30, 40, 50]
layout	组件布局，子组件名用逗号分隔	String	'prev, pager, next, jumper, ->, total'
pageSize	分页大小	Number	20
border	是否设置边框	Boolean	true
dispalyPagination	是否需要显示分页	Boolean	true
tableData	grid数据（不设置remoteMethod的情况下）	Object[]	null
classNameHandle	单元格的 className 的回调方法，也可以使用字符串为所有单元格设置一个固定的 className	Function({row, column, rowIndex, columnIndex})/String	null
rowKey	行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能与显示树形数据时，该属性是必填的。类型为 String 时，支持多层访问：user.info.id，但不支持 user.info[0].id，此种情况请使用 Function。	Function(row)/String	true
options	el-dialog 弹窗相关属性	Object	--