table

表格组件

• json 配置化表格，支持传入插槽名
• 将 table 和 pagination 结合在一起，将表格初始化事件传递进去，不必在单独配置 pagination 的方法。
• 二次封装el-table,支持 el-tables 所有属性的透传。
• 重新初始化表格数据时，自动添加和取消 loading

组件示例

search -item

No Data

• 1

Go to

<template>
  <div class="content-wrap">
    <adv-button type="primary" @click="handkeAdd">新增</adv-button>
    <adv-table :tableConfig="tableConfig" show-overflow-tooltip>
      <template #imgTpl="{ row }">
        <img v-if="row.img" :src="row.img" alt="" />
      </template>
      <template #createTimeTpl="{ row }">
        {{ timeToDateString(row.createTime) }}
      </template>
      <template #updateTimeTpl="{ row }">
        {{ timeToDateString(row.updateTime) }}
      </template>
    </adv-table>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  getTeacherList,
  updateTeacherOne,
  addTeacherOne,
  deleteTeacherOne,
} from '../../api/index.ts';
import { Modal, timeToDateString } from 'leisure-lib';
import Add from './add.vue';
import { ElMessage } from 'element-plus';

const tableConfig = ref({
  columns: [
    {
      label: 'ID.',
      prop: 'id',
    },
    {
      label: '姓名',
      prop: 'name',
    },
    {
      label: '电话',
      prop: 'phone',
    },
    {
      label: '图像',
      prop: 'img',
      slot: 'imgTpl',
    },
    {
      label: '创建时间',
      prop: 'createTime',
      slot: 'createTimeTpl',
    },
    {
      label: '更新时间',
      prop: 'updateTime',
      slot: 'updateTimeTpl',
    },
    {
      label: '描述',
      prop: 'remark',
      showTooltip: true,
    },
    {
      label: '操作',
      type: 'options',
      btns: [
        { icon: 'edit', func: item => handkeDetail(item) },
        { icon: 'delete', func: item => handleDelete(item) },
      ],
    },
  ],
  pagination: {
    total: 0,
    currentPage: 1,
    pageSize: 10,
  },
  listData: [],
  initData: params => initTableData(params),
});

const initTableData = (arg = {}) => {
  const params = {
    currentPage: 1,
    pageSize: 10,
    ...arg,
  };
  return getTeacherList(params).then(res => {
    tableConfig.value.listData = res.list || [];
    tableConfig.value.pagination.total = res.total;
  });
};

const handkeAdd = () => {
  Modal.open(Add, {
    width: 500,
    title: '新增',
    onOk: (comp, modal) => {
      comp.formRef.validate().then(res => {
        if (res) {
          const params = { ...comp.form };
          addTeacherOne(params).then(res => {
            ElMessage.success('操作成功');
            initTableData();
            modal.close();
          });
        }
      });
    },
  });
};

const handkeDetail = row => {
  Modal.open(Add, {
    width: 500,
    title: '编辑',
    id: row.id,
    onOk: (comp, modal) => {
      comp.formRef.validate().then(res => {
        if (res) {
          const params = { ...comp.form, id: row.id };
          updateTeacherOne(params).then(res => {
            ElMessage.success('操作成功');
            initTableData();
            modal.close();
          });
        }
      });
    },
  });
};

const handleDelete = row => {
  Modal.open('是否确认删除该数据？', {
    width: 350,
    title: '删除',
    onOk: (comp, modal) => {
      deleteTeacherOne(row.id).then(res => {
        ElMessage.success('操作成功');
        initTableData();
        modal.close();
      });
    },
  });
};
</script>

<style lang="less" scoped></style>

模型 type / inteface

interface tableConfigI {
  columns?: columnI[];
  listData: any[];
  pagination?: {
    total: number;
    currentPage: number;
    pageSize: number;
  };
  initData?: (params: any) => Promise<any>;
}

interface columnI {
  label: string;
  prop?: string;
  slot?: string;
  type?: string;
  width?: string | number;
  btns?: optI[];
}
interface paginationI {
  total: number;
  currentPage: number;
  pageSize: number;
}

interface optI {
  text: string;
}

属性

属性	值	是否必填	默认值	说明
tableConfig	tableConfigI	否		表格配置文件

tableConfig 属性

属性	值	是否必填	默认值	说明
pagination	paginationI	否	false	分页信息
listData	any[]	否	false	是否 loading
initData	(params: any) => Promise<any>	否	false	初始化方法
columns	columnI[]	否	false	表格列配置

方法

插槽

插槽名	是否必填	默认值	说明
列插槽	否		在 columns 里配置单独的插槽