超级表格

// 导入
import ProTable from '@/components/ProTable'

html

<!-- 模板中使用 -->
    <ProTable 
      ref="proTable" 
      :columns="columns" 
      :requestApi="requestApi" 
      :pagination="true" 
      :moreConfig="moreConfig" 
      :searchCallback="searchCallback">
    <!-- 按钮插槽 -->
      <template #tableHeader="{ ids, selectList, isSelected }">
        <el-button 
          @click="openVisible1(ids, selectList, isSelected)" 
          type="primary"
          >左按钮</el-button>
      </template>
      <!-- 是否展开行 插槽 -->
      <template #expand="{ row }">
        {{ row.address }}
      </template>
      <!-- 表格操作列 插槽 -->
      <template #operation="{ row }">
        <el-button 
          @click=('编辑', row)=>{}" 
          type="primary" 
          plain>编辑</el-button>
      </template>
      
      <!-- 自定义任何以列prop属性为插槽名称的具名插槽 -->
      ···
    </ProTable>

// columns具体例子
const columns = [
  { type: 'selection', width: 80, fixed: 'left' },
  { type: 'index', label: '#', width: 80 },
  { prop: 'operation', label: '操作', width: 180 },
  { type: 'expand', label: '展开', width: 80 },
  { prop: 'username', label: '用户姓名', width: 130, search: true, searchInitParam: 'susu' },
  { prop: 'idCard', label: '身份证号', search: true },
  { prop: 'email', label: '邮箱', search: true },
  { prop: 'address', label: '居住地址', search: true },
  {
    prop: 'status',
    label: '用户状态',
    search: true,
    searchType: 'select',
    enum: [
      { label: '启用', value: 1 },
      { label: '禁用', value: 2 }
    ]
  },
  {
    prop: 'createTime',
    label: '创建时间',
    cell: 2,
    sortable: true,
    search: true,
    searchType: 'datetimerange',
    searchProps: {
      disabledDate: (time) => time.getTime() < Date.now() - 8.64e7
    },
    searchInitParam: ['2022-08-30 00:00:00', '2022-08-20 23:59:59']
  },
  {
    searchType: 'address', //地址组件
    prop: 'addressList', //v-model绑定的属性
    cell: 3,
    search: true,
    searchInitParam: {
      province: '广东省',
      city: '广州市',
      area: '番禺区'
    }
  }
]

// requestApi
const requestApi = () => {
  return new Promise((resolve, reject) => {
    // 模拟发请求
    setTimeout(() => {
      //请求回来表格数据
      const res = [
        {
          address: '河北省 廊坊市',
          age: 15,
          avatar: 'http://dummyimage.com/100x100/79c5f2&text=吴敏',
          createTime: '2017-09-03 01:52:19',
          email: 'b.yee@otdermeuy.kp',
          gender: 2,
          id: '56549284669458114938',
          idCard: '56549284669458114938',
          status: 2,
          username: '韩涛'
        },
      ]
      resolve({
        pagePo: res,
        total: 2
      })
    })
  })
}

// moreConfig
const moreConfig = [
  {
    title: '导出',
    cb: () => {
      console.log('onExport')
    }
  },
  {
    title: '下载模板',
    cb: () => {
      console.log('onDownLoad')
    }
  }
]

// 根据需要调整查询数据类型，特殊需要，比如说必须要数字不能用字符串等
const searchCallback = (param) => {
  param.addressList = [param.addressList.province, param.addressList.city, param.addressList.area]
}

ProTable属性

属性名	说明	类型
columns	用于配置查询条件和表格列	array
requestApi	请求表格数据	function
pagination	是否需要分页，可选true，false	boolean
moreConfig	更多操作按钮	object
searchCallback	调整查询参数类型回调	function

columns属性

属性名	说明	类型
search	是否查询框条件，默认false	boolean
prop	对应列内容的字段名	string
label	列名	string
sortable	是否排序，可选true，false	boolean

TIP

columns中的属性，一份配置，配置查询条件和表格，用search: true属性标志是否为查询框。查询框其他属性详见查询组件,表格属性支持所有饿了么文档已有属性。

超级表格 ​

超级表格