Yjfm-table-pro NPM

安装该组件

依赖

依赖	版本	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	{}