adminPage-vue3依赖TableColumn说明文档

引入

import { TableColumn} from 'adminpage-vue3'

思路介绍

本组件是基于element-UI，对ElTableColumn进行轻度封装，减少开发代码量，统一交互的组件
以下为使用本组件和不使用本组件的参考，所输出结果完全一致

      <TableColumn prop="name"  label="名称" />
      
	  <ElTableColumn prop="name"  label="名称" align="center" show-overflow-tooltip minWidth="90" />

TablePage-vue3 API汇总

属性

属性名	说明	类型	默认值	版本号
ElTableColumn 所有属性	ElTableColumn 所有属性 直接声明到组件上即可	-/-	-/-	1.0.0
cellFilter	单元格文案过滤器	Function		1.0.0

使用

ElTableColumn 所有属性

对于ElTableColumn中的属性、事件、插槽…等可以直接写入本组件

    <tableColumn
      label="操作"
      min-width="50"
      fixed="right"
    >
      <template #default="{ row }">
        <el-button type="primary" link @click="showInfo(row, 'EDIT')">编辑</el-button>
      </template>
    </tableColumn>

cellFilter

本方法接收函数，返回参数data为 该单元格内原始数据，需return一个文案，用于显示

        <tableColumn
          prop="balance"
          label="余额"
          min-width="200"
          fixed
          :cellFilter="cellFilter"
        />

function cellFilter(data) {
  return '￥'+ data;
}