admin-component文档

DgTable 表格

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

基础使用

:::demo

<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>

:::

序号

:::demo 在 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>

:::

全选&多选

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

<template>
  <div>
    <el-button size="small" @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, selection }) {
      // 如果isAll为true, 那么uncheckedList就是取消勾选列表
      // 如果isAll位false，那么checkedList就是勾选列表
      console.log(isAll, checkedList, uncheckedList)

      // selectAllBehaviour为page时才有这个字段回传，为选中的row的集合, v1.9.3新增
      console.log(selection)
    },
    handleResetSelect() {
      this.$refs.table.resetSelectData()
    },
  },
}
</script>

:::

操作列

:::demo 传入按钮配置给 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: '编辑', // 按钮名，可传一个函数，返回值为按钮名字。函数接受row为参数， 类型为Function或String
          disabled: (row, index) => true, // 按钮禁用状态，类型为Function或Boolean
          isConfirm: true, // 使用dg-confirm-button
          confirmMsg: '确定此操作吗？' // 弹框提示内容
          visible: (row) => true // 显示\隐藏按钮。可选，类型为Function或Boolean。不传为显示
        },
        {
          type: 'danger',
          handler: this.handleDelete,
          name: row => '删除',
        },
      ],
    }
  },
  methods: {
    handleEdit(row) {
      alert('编辑')
      console.log(row)
    },
    handleDelete(row) {
      alert('删除')
      console.log(row)
    },
  },
}
</script>

:::

自定义列

:::demo 在 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>

使用render自定义列

通过给 columns 数据的项，设置一个函数 render，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。

const columns = [
    {
      prop: 'sp_st',
      label: '样品状态',
    },
    {
      type: 'options',
      label: '操作',
      width: 400,
      render: (h, { row }) => {
        return h('div', [
          h(AuthButton, {
            type: 'primary',
            name: '解读',
            size: 'small',
            hidden: !['待解读', '待审核'].includes(row.sp_st),
            onClick: () => {
              router.push({ name: 'InterpretReport', params: { id: row.sample_id } })
            },
          }),
        ])
      },
    },
  ]

:::

可编辑列

:::demo 在 columns 的列配置里 type 属性设置为 editable 开启可编辑列，双击此列单元格进入编辑模式，编辑完成触发cellValueChanged事件

<template>
  <dg-table style="height: 300px" :api="api" :columns="columns" @cellValueChanged="handleCellValueChanged">
  </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: '姓名', type: 'editable' }, // 可编辑列
        { align: 'left', isVisible: true, prop: 'address', label: '地址' },
        { align: 'left', isVisible: true, prop: 'status', label: '状态', type: 'slot' },
      ],
    }
  },
  methods: {
    handleCellValueChanged(row, column, cellValue) {
      console.log(row, column, cellValue)
    },
  },
}
</script>

:::

Typescript类型

:::demo

<script lang="ts">
import { SelectData, Column } from '@degon/admin-component-vue3'
</script>

:::

Attributes

参数说明类型可选值默认值
api获取表格列表接口Function<Promise>--
rq获取表格列表传给 api 的参数Object--
columns表格的列字段配置，具体查看其它-columns 配置说明，必传Array<Column>--
buttonGroup操作列按钮组配置，具体查看操作列 demo，不传时没有操作列。Array<Object>--
buttonGroupWidth手动设置操作列按钮组宽度，传 0 或 null，则自动计算Number-0
height传入 el-table height 属性，默认值为 100%，传 null 时，内容自动撑开表格String、Number-'100%'
selectKey全选数据的 keyString-'id'
selectAllBehaviour v1.9.3全选按钮的行为, all为选择数据库所有数据，page为选择当前页数据String-'all'
selectable仅对 type=checkbox 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选Function-(row, index) => true
hasPagination是否需要分页Boolean-true
initPage默认第几页number-1
initPageSize默认每页几条数据number-10
lazyload懒加载，true时mounted不请求api获取数据，默认为falseBooleantrue、falsefalse
el-table 属性支持传入除 data 属性外的其它 el-table 组件属性，具体查看element-ui 文档open in new window---

Methods

方法名说明参数
refresh刷新表格数据（重新请求 api，请求参数为 rq 和分页参数, Object.assign({page, per_page}, rq))-
search搜索表格数据（请求参数为 rq 和分页参数, page 参数重置为 1, Object.assign({page, per_page}, rq, { page: 1 }))-
resetSelectData重置 selectDataparams, 对象，可选，初始 selectData
validateSelectData校验是否勾选了checkbox, 通过返回Promise<SelectData>, 失败返回reject PromisealertMsg, 字符串，可选，传入时校验失败显示提示
doLayout执行重新计算buttonGroup按钮列的宽度，然后调用el-table的doLayout方法。在需要显示/隐藏表格且表格数据有变化时可能需要调用该方法-
setCurrentPage设置当前为第几页page, 数字

Scoped Slot

name说明参数
字段名自定义列的内容{ row }

Events

事件名说明参数
select当用户勾选了 checkbox 时触发的事件{ isAll, checkedList, uncheckedList }
data调用完api后触发的事件列表数据
cellValueChanged可编辑列，编辑单元格内容触发row, column, cellValue

其它

columns 配置说明

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

属性说明类型可选值
type决定该列的类型，可选string'slot', 'order', 'checkbox', 'editable'
isVisible是否显示该列, 可选Booleantrue, false
propel-table-column 的 prop 属性, 必选Sring-
labelel-table-column 的 label 属性，必选Sring-
formatterel-table-column 的 formatter 属性Function-
showOverflowToolTipel-table-column 的 show-overflow-tooltip 属性Booleantrue, false
isFixedel-table-column 的 fixed 属性Boolean, Sringtrue, left, right
alignel-table-column 的 align 属性Stringleft/center/right
minWidthel-table-column 的 min-width 属性Sring-
widthel-table-column 的 width 属性Sring-
render自定义渲染列，使用 Vue 的 Render 函数。传入两个参数，第一个是 h，第二个为对象，包含 row、column 和 index，分别指当前行数据，当前列数据，当前行索引，详见示例。Function-
$attrs除了上述配置，其它el-table-column组件的属性和事件监听，可通过此属性传入。可用属性和事件查看官方文档open in new window。object-
Last Updated:
Contributors: 陈伟成, chwech, 黄嘉铭, longwang1995, meiyaoxiang