cy_web/src/components/heavyTable

// 配置

tableProps: Object, // 配置el-table属性 config: [ { label: "企业名称", // 表格表头 prop: "companyName", // 当前列属性名 type: 'index', // index 序号、selection 多选、switch 开关、button 按钮 slot 插槽 slotName: 'slotName', // 当type为slot时 插槽名称必填 0.3.0 新增 // name: 'slotName', // 当type为slot时 插槽名称必填 // on: '1', // 当type为switch时必传 // off '0', // 当type为switch时必传 buttons:[{ // 当type为 button时必传 name: '编辑', // 通过标签上写 @edit="处理函数" 去捕获 event: 'edit', // 事件名称 disable(row, prop){}, // 按钮禁用规则 传入方法，返回当前行row和prop形参 // disable: { 0.2.1开始废弃 // key: 'status', // value: [1,2], // }, // color: '#ff0', // 按钮颜色 0.3.0开始废弃 }], // style: {color: 'blue'}, // 文本样式 0.3.0 废弃 event: 'delete', // 事件名称 通过标签上写 @delete="处理函数" 去捕获 filter(row, value) { // 处理显示文本内容 0.3.0 有变更 return value + 1; // 返回要显示的文本 }, handlerStyle(row) { // 设置文本样式 return {color: '#f0f'} }, children: [], // 同config参数，最多一个层级 tooltip: true, // 文本超出是否提示 // sort: true, // 是否开启排序功能，默认false 0.3.0 废弃 请使用 sortable }, { label: "演练参与人员", prop: "participants", type: "popover", name: "查看", popover: { width: "200", }, handleTitle(row, prop) { return 参演单位人员(共${row[prop] && row[prop].length}人); }, handleContent(row, prop) { if (row[prop] && row[prop].length) { return row[prop].map((v) => v.name).join("、"); } }, }, { prop: "appendix_list", label: "演练脚本", type: "dropdown", name: '查看', tag: 'name', handleCommand: this.handleCommand }, ], // 表格数据 data: [ { companyName: "中有药业有限公司", },
], // 分页功能 paging: { // 分页参数 没有分页可不传 page: 1, // 当前页 size: 10, // 页面大小 total: 0, // 总条数 pagerCount: 7, // 设置最大页码数 (大于等于 5 且小于等于 21 的奇数) autoSize: false, // 设置根据屏幕高度自动改变每页显示行数 }, loading: false, 设置table加载中状态

```html
<heavy-table
  tableProps=""
  data=""
  paging=""
  loading=""
  @current-change="getData"
  @sort-change
  @edit=""
  @delete="" >
  <template v-slot:[slotName]="scope">{{scope}}</template>
</heavy-table>

属性

参数	说明	类型	可选值	默认值
tableClass	el-table的class属性	string	—	heavyTable
loading	显示table数据加载中	Boolean	—	false
paging	分页组件，page当前页，size每页数据条数，total数据总条数，autoSize根据屏幕大小自动设置size（设置此属性会自动改变size）	object	{}	{page: 1,size: 10,total: 0,autoSize: false}
data	显示的数据	Array	—	—
tableProps	属性参考element-ui Table Attributes
config	配置表头	Array[{label,prop,slotName,type,buttons,tooltip,handlerStyle,class,event,filter,children,...}]	—	—
config[type]	对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮	string	selection/index/expand/switch/slot	—
config[type='switch']	1. 使用el-switch 属性同步，change方法通过event接收	string	—	—
config[type='popover']	可以使用属性popover同el-popover 和title，content和 handleTile，handleContent函数	string	—	—
config[type='dropdown']	属性配置Dropdown Attributes使用dropdown对象，下拉选项配置按钮名称name 下拉文本名称tag 点击事件 handleCommand	string	—	—
config[type='slot']	2. 插槽模式下设置需设置slotName属性	string	—	—
config[type='button']	3. 按钮组模式下需要设置buttons属性	string	—	—
config[buttons]	type='button'时此属性生效，配置按钮属性有type，class，disable，event，name	Array[{type,class,disable,event,name}]	—	—
config[buttons[type]]	按钮类型	string	primary / success / warning / danger / info / text	text
config[buttons[class]]	按钮类名	string	del/...	—
config[buttons[disable]]	按钮禁用规则 disable(callback(row[, prop]))	function	—	—
config[buttons[event]]	点击按钮的事件名称	string	—	—
config[buttons[name]]	按钮显示文本内容	string	—	—
config[buttons[hidden]]	是否隐藏按钮 hidden(callback(row))	function	—	默认显示按钮
config[tooltip]	当内容过长被隐藏时显示tooltip同时原属性(show-overflow-tooltip)失效	Boolean	—	true
config[handlerStyle]	设置当前列样式 handlerStyle(callback(row))	function	—	—
config[class]	设置当前列类名 对象写法同vue绑定class方式一样，函数写法class(callback(row))	string/object/function	—	—
config[event]	设置点击当前列点击事件	string	—	—
config[filter]	过滤当前列中单元格显示的内容 filter(callback(row[, prop]))	function	—	—
config[prop]	对应data[prop]属性	string	—	—
config[label]	表格列标题名称	string	—	—
config[children]	多级表头children可以嵌套一次config下除index，selection其他所有属性但是不能再次嵌套children属性	Array[{...config}]	—	—
...	其他列属性config[object] 参考 element-ui Table-column Attributes	—	—

event事件

事件名	说明	参数
current-change	分页按钮点击事件	index
handleselection	当选择项发生变化时会触发该事件	selection
sort-change	当表格的排序条件发生变化的时候会触发该事件	{ column, prop, order }
[event]	config中配置的event事件和按钮配置的event事件	row