DgTable 表格

封装了el-table和el-pagination的表格组件。封装了表格获取数据请求的细节，自动分页处理，字段数据配置化等。

基础使用

<template>
  <dg-table style="height: 300px" :api="api" :columns="columns" />
</template>

<script>
  export default {
    data() {
      return {
        api: this.$api.getTableList, // 实际是import引入使用，此处示例是由于demo container的限制使用hack的演示
        columns: [
          { align: 'left', isVisible: true, prop: 'date', label: '日期' },
          { align: 'left', isVisible: true, prop: 'name', label: '姓名' },
          { align: 'left', isVisible: true, prop: 'address', label: '地址' },
        ],
      }
    }
  }
</script>

Expand Copy Copy

序号

在columns的列配置里type属性设置为order开启序号列, 序号列与element的序号不同，此序号列在跳页后不重新计数。

<template>
  <dg-table style="height: 300px" :api="api" :columns="columns" />
</template>

<script>
  export default {
    data() {
      return {
        api: this.$api.getTableList,
        columns: [
          { align: 'left', isVisible: true, type: 'order', label: '序号' },
          { align: 'left', isVisible: true, prop: 'date', label: '日期' },
          { align: 'left', isVisible: true, prop: 'name', label: '姓名' },
          { align: 'left', isVisible: true, prop: 'address', label: '地址' },
        ],
      }
    }
  }
</script>

Expand Copy Copy

全选&多选

全选为选择所有数据(非当前页)。可以在columns的列配置里type属性设置为checkbox开启, 然后监听组件select方法获取选择项目的数据。默认情况下，收集的勾选列表或取消勾选列表为row.id，如果需要收集其它id，可以传selectKey属性指定。

<template>
  <div>
    <el-button size="mini" @click="handleResetSelect" type="primary">重置全选</el-button>
    <dg-table ref="table" style="height: 300px" :api="api" :columns="columns" @select="handleCheckBoxSelect" selectKey="user_id" />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        api: this.$api.getTableList,
        columns: [
          { align: 'left', isVisible: true, type: 'checkbox' },
          { align: 'left', isVisible: true, prop: 'date', label: '日期' },
          { align: 'left', isVisible: true, prop: 'name', label: '姓名' },
          { align: 'left', isVisible: true, prop: 'address', label: '地址' },
        ],
      }
    },
    methods: {
      handleCheckBoxSelect ({ isAll, checkedList, uncheckedList }) {
        // 如果isAll为true, 那么uncheckedList就是取消勾选列表
        // 如果isAll位false，那么checkedList就是勾选列表
        console.log(isAll, checkedList, uncheckedList)
      },
      handleResetSelect () {
        this.$refs.table.resetSelectData()
      }
    }
  }
</script>

Expand Copy Copy

操作列

传入按钮配置给button-group属性即可开启操作列，操作列宽度按照按钮数量自适应宽度。

<template>
  <dg-table style="height: 300px" :api="api" :columns="columns" :button-group="buttonGroup" />
</template>

<script>
  export default {
    data() {
      return {
        api: this.$api.getTableList,
        columns: [
          { align: 'left', isVisible: true, prop: 'date', label: '日期' },
          { align: 'left', isVisible: true, prop: 'name', label: '姓名' },
          { align: 'left', isVisible: true, prop: 'address', label: '地址' },
        ],
        buttonGroup: [
          { 
            type: 'primary', // el-button的type属性
            handler: this.handleEdit, // 此按钮的回调
            name: '编辑', // 按钮名
            disabled: (row, index) => true // 按钮禁用状态，类型为Function或Boolean
          },
          { 
            type: 'danger',
            handler: this.handleDelete,
            name: '删除'
          }
        ]
      }
    },
    methods: {
      handleEdit (row) {
        alert('编辑')
        console.log(row)
      },
      handleDelete (row) {
        alert('删除')
        console.log(row)
      }
    }
  }
</script>

Expand Copy Copy

自定义列

在columns的列配置里type属性设置为slot可开启此列的命名作用域插槽。插槽名为此列配置的prop属性值。回传给父作用域参数为row

<template>
  <dg-table style="height: 300px" :api="api" :columns="columns">
    <template v-slot:status="{row}">
      <el-switch
        v-model="row.status"
        @change="onSwitchEnable(row)"
        :active-value="1"
        :inactive-value="0" />
    </template>
  </dg-table>
</template>

<script>
  export default {
    data() {
      return {
        api: this.$api.getTableList,
        columns: [
          { align: 'left', isVisible: true, prop: 'date', label: '日期' },
          { align: 'left', isVisible: true, prop: 'name', label: '姓名' },
          { align: 'left', isVisible: true, prop: 'address', label: '地址' },
          { align: 'left', isVisible: true, prop: 'status', label: '状态', type: "slot" },
        ],
      }
    },
    methods: {
      onSwitchEnable (row) {
        console.log(row)
      }
    }
  }
</script>

Expand Copy Copy

表头筛选

配置column.headerFilterPanel即可开启表头筛选。现有input和radio两种类型，监听dgTable的header-filter事件可以接收到筛选数据。

<template>
  <dg-table style="height: 300px" :api="api" :columns="columns" @header-filter="handleHeaderFilter">
    <template v-slot:status="{row}">
      {{ row.status ? '开启' : '关闭' }}
    </template>
  </dg-table>
</template>

<script>
  export default {
    data() {
      return {
        api: this.$api.getTableList,
        columns: [
          { align: 'left', isVisible: true, prop: 'date', label: '日期' },
          { align: 'left', isVisible: true, prop: 'name', label: '姓名', headerFilterPanel: { type: 'input' } },
          { align: 'left', isVisible: true, prop: 'address', label: '地址' },
          { align: 'left', isVisible: true, prop: 'status', label: '状态', type: "slot", headerFilterPanel: { type: 'radio', radio: [{label: '开启', value: 1}, { label: '关闭', value: 0}] } },
        ],
      }
    },
    methods: {
      handleHeaderFilter (filterForm) {
        // filterForm为所有开启了表头筛选列的表单数据，对象属性为每列column.prop
        console.log(filterForm)
      }
    }
  }
</script>

Expand Copy Copy

自定义表头

开启名为column.prop + 'Header'的作用域插槽即可以自定义表头。可以在scope里拿到column的数据

<template>
  <dg-table style="height: 300px" :api="api" :columns="columns" @header-filter="handleHeaderFilter">
    <!-- 自定义表头 -->
    <template v-slot:nameHeader="{ column }">
      {{ column.label }}: 老王
    </template>
  </dg-table>
</template>

<script>
  export default {
    data() {
      return {
        api: this.$api.getTableList,
        columns: [
          { align: 'left', isVisible: true, prop: 'date', label: '日期' },
          { align: 'left', isVisible: true, prop: 'name', label: '姓名' },
          { align: 'left', isVisible: true, prop: 'address', label: '地址' }
        ],
      }
    }
  }
</script>

Expand Copy Copy

Attributes

参数	说明	类型	可选值	默认值
api	获取表格列表接口	Function<Promise>	-	-
rq	获取表格列表传给api的参数	Object	-	-
columns	表格的列字段配置，具体查看其它-columns配置说明，必传	Array<Object>	-	-
buttonGroup	操作列按钮组配置，具体查看操作列demo，不传时没有操作列。	Array<Object>	-	-
height	传入el-table height属性，默认值为100%，传null时，内容自动撑开表格	String、Number	-	'100%'
selectKey	全选数据的key	String	-	'id'
el-table属性	支持传入除data属性外的其它el-table组件属性，具体查看element-ui文档 (opens new window)	-	-	-

Methods

方法名	说明	参数
refresh	刷新表格数据（重新请求api)	params, 对象，可选，请求列表的参数
resetSelectData	重置selectData	params, 对象，可选，初始selectData

Scoped Slot

name	说明	参数
column.prop	自定义列的内容	{ row }
${column.prop}Header	自定义列表头	{ column }

Events

事件名	说明	参数
select	当用户勾选了checkbox时触发的事件	{ isAll, checkedList, uncheckedList }
header-filter	当用户点击了表头筛选的搜索按钮触发的事件	filterForm

其它

columns配置说明

columns的类型是对象数组(Array<Object>), 对象结构如下, 其中大部分属性为el-table-column的属性 (opens new window)

属性	说明	类型	可选值
type	决定该列的类型，可选	string	'slot', 'order', 'checkbox'
isVisible	是否显示该列, 必选	Boolean	true, false
prop	el-table-column的prop 属性, 必选	Sring	-
label	el-table-column的label 属性，必选	Sring	-
formatter	el-table-column的formatter 属性	Function	-
showOverflowToolTip	el-table-column的show-overflow-tooltip属性	Boolean	true, false
isFixed	el-table-column的fixed 属性	Boolean, Sring	true, left, right
align	el-table-column的align 属性	String	left/center/right
minWidth	el-table-column的min-width 属性	Sring	-
width	el-table-column的width 属性	Sring	-
headerFilterPanel	开启表头筛选, 可选。type的值有'input'或'radio'，使用radio时，需传radio作为选项，格式和el-select选项一样	Object	-