YKC UI

# table

# 基础用法

基础用法
自定义渲染
<template>
  <ykc-table
    :data="data" :columns="columns" title="基础用法"
    :headerButtons="headerButtons" @header-button-click="handleHeaderButtonClick"
  />
</template>
<script>
export default {
  data() {
    return {
      data: [{ col_1: '1-1', col_2: '1-2' },{ col_1: '2-1', col_2: '2-2' }],
      columns: [{ label: '第一列', prop: 'col_1' },{ label: '第二列', prop: 'col_2' }],
      headerButtons: [
        {text: '不可用', disabled: true },
        // handleClick字段可以执行点击处理，有该字段则不会派发 header-button-click 事件
        { text: '新增', handleClick: () => console.log('新增') },
        { text: '编辑', type: 'primary' },
        { text: '删除', type: 'text' },
        { render: () => <span style="color:red">自定义渲染</span> },
      ],
    };
  },
  methods: {
    handleHeaderButtonClick(button) {
      console.log(button.text);
    }
  }
};
</script>
显示代码 复制代码

# 列的自定义渲染

列的自定义渲染
<template>
  <ykc-table :data="data" :columns="columns" title="列的自定义渲染"/>
</template>
<script>
export default {
  data() {
    return {
      data: [{ col_1: '1-1', col_2: '1-2' },{ col_1: '2-1', col_2: '2-2' }],
      columns: [
        { label: '第一列', prop: 'col_1' },
        { 
          label: '第二列', prop: 'col_2',
          scopedSlots: { 
            // 自定义渲染表格数据内容
            default: ({ row }) => row.col_1 + ' and ' + row.col_2,
            // 自定义渲染表格头部内容
            header: ({ column }) => <span style={{color:'red'}}>{'this is ' + column.label }</span>
          },
        },
      ],
    };
  },
};
</script>
显示代码 复制代码

# 可选择

可选择
<template>
  <ykc-table
    :data="data" :columns="columns" title="可选择"
    :selectable="true" @select="handleSelect"
  />
</template>
<script>
export default {
  data() {
    return {
      data: [{ col_1: '1-1', col_2: '1-2' },{ col_1: '2-1', col_2: '2-2' }],
      columns: [{ label: '第一列', prop: 'col_1' },{ label: '第二列', prop: 'col_2' }],
    };
  },
  methods: {
    handleSelect(selection) {
      console.log('选择内容为', selection);
    }
  }
};
</script>
显示代码 复制代码

# 操作列

操作列
<template>
  <ykc-table
    :data="data" :columns="columns" title="操作列"
    :operateButtons="operateButtons" @row-button-click="handleRowButtonClick"
  />
</template>
<script>
export default {
  data() {
    return {
      data: [{ col_1: '1-1', col_2: '1-2' },{ col_1: '2-1', col_2: '2-2' }],
      columns: [{ label: '第一列', prop: 'col_1' },{ label: '第二列', prop: 'col_2' }],
      operateButtons: [
        { text: '不可用', disabled: true },
        // handleClick字段可以执行点击处理，有该字段则不会派发 header-button-click 事件
        { text: '新增', handleClick: () => console.log('新增') },
        // 按钮可通过render字段自定义渲染，所有业务逻辑由开发者自己处理
        { render: () => <div style="color:red">自定义渲染</div> },
        { text: '删除' },
      ],
    };
  },
  methods: {
    handleRowButtonClick(button, { row }) {
      console.log(button.text, row);
    },
  }
};
</script>
显示代码 复制代码

# Attributes

参数 必填 说明 类型 可选值 默认值
title 否 头部标题（也可以通过 slot='title' 自定义） string 无 ''
header-buttons 否 头部按钮组，每项的属性一般包含id, text, render, handleClick(这四个属性可以通过button-prop-config配置)，其余属性会传给ykc-button
（也可以通过 slot='headerButtons' 自定义）		 array 无 []
header-button-default-props 否 头部按钮组每个按钮的默认属性，比如头部按钮组都是text按钮，则传入{type:'text'} object 无 {}
button-prop-config 否 头部按钮组和操作列按钮组属性key设置，会与对象{id:'id', text:'text', render:'render', handleClick:'handleClick'}合并成一个新对象供表格组件内部使用 object 无 {}
data 否 表格数据 array 无 []
selectable 否 是否显示复选框 boolean 无 false
row-selectable 否 当前行是否可勾选 Function(row, index) 无 () => true
select-on-indeterminate 否 在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行 boolean 无 false
empty-text 否 空数据时显示的文本内容，也可以通过 slot='empty' 设置 string 无 '暂无数据'
table-config 否 传入内部ElTable的属性，可用属性有 height, maxHeight, rowClassName, cellClassName, headerRowClassName, headerCellClassName, tooltipEffect, showSummary, summaryMethod object 无 {}
columns 否 表格列设置，每项可用属性为 label, prop, width, minWidth, fixed, showOverflowTooltip, align, headerAlign, className, labelClassName, scopedSlots
其中scopedSlots是作用域插槽渲染，如何使用 (opens new window)		 array 无 []
column-key-prop 否 每列的键名，默认为 prop string 无 'prop'
operate-fixed-type 否 操作列该如何fixed，可选值有 auto 和 right
auto会自动把操作列放在最后一列		 string auto 或 right 'auto'
operate-label 否 操作列表头显示的标题 string, Function(h, {column,$index}) 无 '操作'
operate-buttons 否 操作列数据行的按钮组
为函数时，则是自定义渲染		 array, Function(h, {row,column,$index}) 无 []
operate-buttons-split-count 否 操作列按钮很多时,超过该数目,默认为3,超出的按钮显示在弹出层 number 无 3
operate-button-default-props 否 操作列按钮默认属性 object 无 {type: 'text'}
operate-tooltip-props 否 操作列,更多操作图标在hover时的tooltip属性 object 无 {content:'更多操作', placement:'top', popperClass: 'operate-column-tooltip-popper'}
operate-button-extra-icon 否 操作列,可弹出按钮组的图标按钮的图标定义 string 无 'points'
operate-width 否 操作列宽度
auto表示会自动计算宽度，会在该列的前后留白，UI称作安全距离		 string auto 或 可转成大于0数字的字符串 'auto'

# Events

事件名称 说明 回调参数
header-button-click 头部按钮点击 button, index, ctx
ctx表示当前ykc-table实例
row-button-click 操作列按钮点击 button, { row, column, $index}, ctx
ctx表示当前ykc-table实例
select 操作列按钮点击 button, { row, column, $index}, ctx
ctx表示当前ykc-table实例
select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row
select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection
selection-change 当选择项发生变化时会触发该事件 selection
cell-mouse-enter 当单元格 hover 进入时会触发该事件 row, column, cell, event
cell-mouse-leave 当单元格 hover 退出时会触发该事件 row, column, cell, event
cell-click 当某个单元格被点击时会触发该事件 row, column, cell, event
cell-dblclick 当某个单元格被双击击时会触发该事件 row, column, cell, event
row-click 当某一行被点击时会触发该事件 row, column, event
row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, column, event
row-dblclick 当某一行被双击时会触发该事件 row, column, event
header-click 当某一列的表头被点击时会触发该事件 column, event
header-contextmenu 当某一列的表头被鼠标右键点击时触发该事件 column, event

# Methods

方法名 说明 参数
clearSelection 用于多选表格，清空用户的选择 —
toggleRowSelection 用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中） row, selected
toggleAllSelection 用于多选表格，切换所有行的选中状态 -
doLayout 对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法 —
renderTitle 可通过mixin or extends自定义渲染头部标题 —
renderHeaderButton 可通过mixin or extends自定义渲染头部单个按钮 h, button, index
renderHeaderButtons 可通过mixin or extends自定义渲染头部按钮组 h
renderHeader 可通过mixin or extends自定义渲染头部 h
renderTable 可通过mixin or extends自定义渲染表格 h
renderPagination 可通过mixin or extends自定义渲染分页器 —
Last Updated: 2021/11/8 上午11:57:48

← pagination →