PenkTable 表格栏

专门用于后台管理系统，因为表格都是固定的一些数据，或者使用前先格式化一下数据。 PenkTable 通过传递 JSON 对象，配置表格里面的一些配置，以及数据，当然也有一些作用域插槽，方便对数据进行操作。

基础用法

在按照文档配置，进行了 Penk-Ui 依赖包的安装后，就可以直接使用。

// xxx.vue template
<PenkTable :table-data="tableData" :column-config="columnConfig" hasOpr>
</PenkTable>

作用域插槽

// xxx.vue template scope
<PenkTable :table-data="tableData" :column-config="columnConfig" hasOpr>
  <template #default="{ scope }">
    <el-button
      type="danger"
      :icon="Delete"
      @click="handleForceDeleteItem(scope.$index, scope.row)"
    >
    </el-button>
  </template>
</PenkTable>

配置

// xxx.vue script
<script setup lang="ts">
  {/* 基础配置 */}
const columnConfig: any = [
  {
    label: "用户类型",
    prop: "userType",
    render: function (value: any) {
      if (!value) return false;
      let temp: any = this.data.find((item: any) => item.value == value);
      if (temp) {
        return temp.label;
      } else {
        return value;
      }
    },
    data: [
      { label: "游客", value: 1 },
      { label: "管理员", value: 2 },
    ],
  },
  {
    label: "用户名",
    prop: "userName",
  },
  {
    label: "邮件",
    prop: "email",
  },
  {
    label: "手机",
    prop: "phone",
  },
  {
    label: "创建时间",
    prop: "createdAt",
  },
  {
    label: "更新时间",
    prop: "updatedAt",
  },
  {
    label: "删除时间",
    prop: "deletedAt",
  },
];

// 后端返回的表格数据
let tableData = reactive([
  {
    id: 16,
    userType: 89,
    userName: "penk",
    passWord: "as456852",
    email: null,
    phone: null,
    url: null,
    money: 0,
    createdAt: "2020-07-05T17:34:58.000Z",
    updatedAt: "2022-12-12T04:43:42.000Z",
    deletedAt: null,
    "userTypeFk.id": 89,
    "userTypeFk.typeName": "游客",
    enabled: true,
  },
  {
    id: 20,
    userType: 88,
    userName: "1111",
    passWord: "as456852",
    email: "1111",
    phone: "111",
    url: null,
    money: 0,
    createdAt: "2020-10-28T16:46:57.000Z",
    updatedAt: "2022-12-12T04:01:15.000Z",
    deletedAt: null,
    "userTypeFk.id": 88,
    "userTypeFk.typeName": "超级管理员",
    enabled: true,
  },
  {
    id: 19,
    userType: 88,
    userName: "111",
    passWord: "as456852",
    email: "11",
    phone: "111",
    url: null,
    money: 0,
    createdAt: "2020-10-28T16:46:49.000Z",
    updatedAt: "2022-12-12T04:01:14.000Z",
    deletedAt: null,
    "userTypeFk.id": 88,
    "userTypeFk.typeName": "超级管理员",
    enabled: true,
  }
]);
</script>

自定义渲染 render

这里模拟后端返回的是用户类型的主键，根据后端返回的用户类型数据表，遍历出想要的 label，当然也可以稍加处理...

// xxx.vue script
<script setup lang="ts">
const columnConfig: any = [
  {
    label: "用户类型",
    prop: "userType",
    render: function (value: any) {
      if (!value) return false;
      let temp: any = this.data.find((item: any) => item.value == value);
      if (temp) {
        return temp.label;
      } else {
        return value;
      }
    },
    data: [
      { label: "游客", value: 1 },
      { label: "管理员", value: 2 },
    ],
  },
];

</script>

PenkTable TypeScript 接口声明

interface props {
  // 表格数据
  tableData: {
    [index: number]: dataItemObj;
  };
  // 列数据
  columnConfig: columnConfig;
  // 判断表格有无列操作
  hasOpr?: boolean;
  // 判断是否有checkbox
  isSelection?: boolean;
}

// tableData的item对象，是一个不确定的对象
interface dataItemObj {
  [index: string]: any;
}

// columnConfig 是一个columnItemObj对象的数组
interface columnConfig {
  [index: string]: columnItemObj;
}

// 每一列的配置对象
interface columnItemObj {
  // 必填
  // el-table prop 属性 字段名
  prop: string;
  // el-table label 属性 列名
  label: string;

  // 选填
  // 判断是否隐藏，一些业务需求，比如不同的权限可能就不展示了
  hidden?: boolean;
  // 列无数据占位符
  emptyStr?: string;
  // el-table fixed 属性 左右固定布局  只能在头尾的配置中存在
  fixed?: string;
  // el-table 一列的 width 属性 宽度
  width?: number | string;
  // 自定义渲染
  render?: render;
}

// 渲染函数，比如后端给你返回了0 代表 禁止， 1 代表启用
// 这个时候就需要渲染函数了...
interface render {
  (v: any): string;
}

PenkTable API

PenkTable 属性

属性名	说明	类型	默认值
tableData	必填，后端返回的 ajax 数据，用于传递给 el-table 渲染使用	any[]	[]
columnConfig	必填，列数据，用来展示 el-table 里面的 column	columnConfig	[]
hasOpr	选填，判断表格有无列操作，即表格中最后一项一般会是自定义的编辑或者删除按钮	boolean	false
isSelection	选填，判断是否有 checkbox	boolean	false

columnConfig 属性

属性名	说明	类型	默认值
prop	必填，对应 el-table prop 属性字段名	string	---
label	必填，el-table label 属性列名	string	---
hidden	选填，判断是否隐藏，一些业务需求，比如不同的权限可能就不展示了	string	---
emptyStr	选填，列无数据占位符	string	---
fixed	选填，el-table fixed 属性左右固定布局只能在头尾的配置中存在	string	---
width	选填，el-table 一列的 width 属性宽度	string 或 number	---
render	选填，自定义渲染	render func	---

PenkTable 插槽

插槽名	说明
default	默认增加在最后一列，并且需要属性hasOpr:true; 才生效

PenkTable 表格栏 #

基础用法 #

作用域插槽 #

配置 #

自定义渲染 render #

PenkTable TypeScript 接口声明 #

PenkTable API #

PenkTable 属性 #

columnConfig 属性 #

PenkTable 插槽 #

PenkTable 表格栏

基础用法

作用域插槽

配置

自定义渲染 render

PenkTable TypeScript 接口声明

PenkTable API

PenkTable 属性

columnConfig 属性

PenkTable 插槽