Ele-list-page NPM

ele-list-page

超级列表页 --- 一个基于element-ui的vue插件

样式

功能

搜索表单：输入框、单选框、日期选择器、下拉框（支持远程搜索和下拉懒加载）。支持配置每行显示个数及“更多”搜索。
按钮组：批量删除、生效、失效、新增、搜索、自定义列（显示、隐藏、排序）等功能。可分为左右布局或上下布局，支持自定义颜色，方法，按钮名称。
列表：支持单元格点击跳转、行选择、操作列（动态html及方法）、树形表格、可编辑表格、支持自定义表头颜色、配置列宽、动态高度（可配置页面一屏显示）、序号列、固定列及表头、合计行等。
分页：可配置多个每页显示最大条数、自动固定到页面底部。

适用场景

列表页面直接通过配置js对象及方法就可以使用，不涉及vuex，但是部分功能需要后端支持（如分页）。

安装

npm i ele-list-page

使用

// 组件引入
import EleListPage from 'ele-list-page'
Vue.use(EleListPage)

// 组件样式引入 import 'ele-list-page/src/lib/index.css'

// 组件是基于element-ui的，所以也需要引入element-ui import ElementUI from 'element-ui'; Vue.use(ElementUI)

> list.vue template部分

<EleListPage :searchForm="searchForm" :tableCommonOptions="tableCommonOptions" :listLoading="listLoading" :loadTableData="loadTableData"

:tableList="tableList" :onSaveCustom="onSaveCustom"

list.vue js部分

data() {
  const tableCommonOptions = {
    searchOptions: {
      isAllHidden: false,// 为true时隐藏搜索条件
      // 超过8个 自动隐藏，右侧此时出现更多，单击下拉
      searchData: [
        {
          name: '编号',
          searchField: 'code',
        },
        {
          name: '状态',
          searchField: 'status',
          searchType: 'select',
          selectList: [{text: 1, value: 1}]
        }
      ],
    },
    filterOptions: {
      // 为true时隐藏中间按钮
      isAllHidden: false,
      // left为左侧， right为右侧按钮
      left: [
        {
          filterType: 'add',
          disabled: false,
          type: 'info'
        },
        {
          filterType: 'invalid',
          disabled: false
        },
        {
          filterType: 'valid',
          disabled: false
        },
        {
          filterType: 'export',
          disabled: true
        },
        {
          filterType: 'customColumns'
        }
      ],
      right: [
        {
          filterType: 'search', // 搜索按钮
          fn: () => {
            this.loadTableData();
          }
        },
        {
          filterType: 'clear', // 搜索按钮
          fn: () => {
            this.searchForm = {};
            // 看是否需要调用搜索
            this.loadTableData();
          }
        },
      ]
    },
    tableOptions: {
      underlineHandles: {
        code: ({row}) => {
          const params = {
            code: row.code || null 
          }
          alert('gotoDetail');
        }
      },
      columnsData: {
        showColumns: [],
        hiddenColumns: []
      },
      headerHandleOperation: {
        prop: 'operation',
        label: '操作',
        operationOptions: [{
          name: '修改',
          fn: ({row: {code}}) => {
            const params = {
              code
            }
            alert('gotoDetail');
          },
          disabled: false
        }, {
          name: '删除',
          type: 'danger',
          fn() {
            console.log('删除')
          },
          disabled: true,
        }]
      }
    },
    pagination: {
      total: 0,
      pageNo: 1,
      pageSize: 20
    }
  };
  return {
    tableCommonOptions,
    listLoading: false,
    searchForm: {},
    tableList: [],
  }
},
methods: {
  onSaveCustom(selectedNumber, closeDialog) {
    // 保存自定义列
    const request = {
      userModuleColumnsReqs: (selectedNumber || []).map((item, index) => {
        return {
          columnId: item,
          seq: index + 1
        }
      })
    };
    // 此处需要自己处理@TODO
    this.$store.dispatch('page/saveCustomColumns', request).then(() => {
      this.loadCustomColumnsList();
      // 更新列表数据
      this.loadTableData();
      closeDialog && closeDialog();
    })
    // 保存自定义列
  },
  loadSearchList() {
    // 初始化搜索项
    const searchData = this.tableCommonOptions.searchOptions.searchData;
    const newSearchData = [...searchData];
    // 搜索项下拉框列表填充
  },
  loadTableData() {
    const searchForm = this.searchForm;
    const request = {
      ...searchForm,
      startPage: this.tableCommonOptions.pagination.pageNo,
      pageSize: this.tableCommonOptions.pagination.pageSize
    }

// 表格数据更新
//this.listLoading = true
//getTableList(request).then(({data: {data: tableList, total}}) => {
//  this.tableList = tableList || [],
//  this.tableCommonOptions.pagination = {
//    ...this.tableCommonOptions.pagination,
//    total
//  }
//}).finally(() => {
//  this.listLoading = false
//})

}, loadCustomColumnsList() { // 获取自定义列列表 //getCustomizedColumnsList().then(({data}) => { // // 接口的数据结构showColumns = {showName, showField, id, refField} // // table表头所需 // const columnsMatchParams = { // prop: 'showField', // label: 'showName' // }; // // 自定义列所需 // const customColumnsMatchParams = { // key: 'id', // label: 'showName' // } // const tableCommonOptions = this.tableCommonOptions;

//  tableCommonOptions.tableOptions = {
//    ...tableCommonOptions.tableOptions,
//      columnsData: data,
//      columnsMatchParams,
//      customColumnsMatchParams
//  }
//})

}, }, mounted() { // // 初始化搜索项 this.loadSearchList(); // // 加载自定义列数据 this.loadCustomColumnsList(); // 加载表格数据 this.loadTableData(); }