安装该组件

依赖

| 依赖 | 版本 | dev | | ---------------- | :-----: | ----: | | core-js | ^3.6.5 | false | | element-ui | ^2.15.3 | false | | vue | ^2.6.11 | false | | @vue/cli-service | ~4.5.0 | true |

安装

npm install yjfm-table-pro

引入

...
import tablePro from 'yjfm-table-pro'
import 'yjfm-table-pro/lib/yjfm-table-pro.css'
...
Vue.use(tablePro)
...

创建配置文件 table.js

export function getConf() {
  const that = this;
  const tableProps = {};
  const getHeaderActions = () => {
    return [
      {
        label: "新增",
        onClick: () => {
          alert("新增");
        },
        type: "primary",
        icon: "el-icon-plus",
      },
    ];
  };
  const getTableConf = () => {
    return [
      {
        label: "项目名称",
        prop: "projectName",
        tooltip: true,
      },
      {
        label: "操作",
        prop: "id",
        fixed: "right",
        width: 200,
        dontVisible: true,
        getContent(row) {
          return (
            <div>
              <el-popconfirm title="确定删除该记录？" onOnConfirm={() => {}}>
                <span class="danger link-text" slot="reference">
                  删除
                </span>
              </el-popconfirm>
            </div>
          );
        },
      },
    ];
  };
  const tableItem = getTableConf();
  return {
    api: this.api,
    tableConf: {
      tableProps,
      tableItem,
    },
    headerConf: {
      actions: getHeaderActions(),
      title: "项目",
    },
    filterConf: {
      options: [{ label: "项目名称", prop: "projectName" }],
      actions: [],
      params: {
        projectName: null,
        manager: null,
        workingTime: null,
      },
    },
  };
}

创建 demo.vue

<template>
  <div>
    <yjmf-table-pro-page v-bind="tableConf" />
  </div>
</template>
<script>
import { getConf } from './table'
const reqFetchList = ()=>{
  return new Promise((resolve,reject)=>{
    const list = []
    for(let i=0;i<15;i++){
      list.push({
        id:(i+1),
        projectName:`项目名称${i}`
      })
    }
    resolve({
      list,
      total:1000
    })
  })
}
export default {
  data() {
    const tableConf = getConf.call(this, reqFetchList)
    return {
      tableConf,
    }
  }
}
</script>

运行代码将看到一个简单的列表页

组件介绍

| 组件名称 | 描述 | | --------------------- | :--------------: | | yjmf-table-pro-page | 列表页组件 | | yjmf-table-pro | 列表组件 | | yjmf-table-pro-header | 列表页头部组件 | | yjmf-table-pro-filter | 列表页筛选项组件 |

yjmf-table-pro-page 列表页组件

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ---------- | ---------------- | ------------------------------------ | ------ | ------ | | api | 列表请求接口方法 | Function 该方法返回一个 Promise 对象 | | | headerConf | 列表页页头参数 | Object | | {} | | filterConf | 筛选项参数 | Object | | {} | | tableConf | 列表参数 | Object | | {} |

方法

| 方法名 | 说明 | 参数 | | --------- | ---------------------- | ------------------ | | setData | 设置组件 data 属性 | key:string,val:any | | onSearch | 设置查询参数并进行查询 | val:object | | fetchData | 查询列表 | null |

data 属性

| 属性名 | 类型 | 说明 | | ------ | ---- | ---- |

|page|Object|内含size,current| |page.size|Number|每页的记录数| |total||