组件同时支持vue3 jsx 和 template，个人建议复杂表格最好使用jsx用法，因为受语法限制template代码量往往更多，处理更复杂

前言：el-easytable是基于vue3jsx element ui参照antd design pro实现的复合表格和可编辑表格，里面的属性和用法基本一致，但是由于vue 的数据是双向绑定的所以可编辑表格也会有所不同,好的意见评论区留言。

一、使用

1.安装

npm i el-easytable -S

2.引用

import { ProTable,EditTable } from "el-easytable"
import "el-easytable/dist/style.css";

二、proTable 用法示例

源码下载或查看demo没有私服，暂未开放，可下载源码查看demo

1.基础用法

template语法用法完整代码示例，jsx用法会在最后复杂用例中呈现

<template>
    <pro-table
        :label-width="80" //查询表单的label-width，默认130px
        headerTitle="用户列表" //表格标题
        :request="handleRequest"
        :columns="columns"
    />
</template>
<script setup lang="js" name="ProTableDemo">
import { ProTable } from "el-easytable";
//表格列配置
const columns = [
  {label: "姓名", prop: "name"},
  {
    label: "性别",
    prop: "gender",
    valueType: "select",//valueType是查询表单项类型
    valueEnum:  [
      {label: "男", value: 1, status: 'success'},
      {label: "女", value: 2, status: 'error'}
    ]//valueEnum是select的静态选择项，动态获取使用remoteMethod:(query, row, $index)=>{}
  },
  {
    label: "年龄",
    prop: "age",
    valueType: "number"
  },
  {
    label: "出生年月",
    prop: "date",
    valueType: "date"
  },
  {
    label: "个人介绍",
    prop: "textarea",
    valueType: "textarea", //超出三行显示...鼠标悬浮tooltip显示全部
    hideInSearch: true //在搜索表单中不显示当前列
  },
  {
    label: "超长隐藏",
    prop: "ellipsis",
    valueType: "ellipsis", //超长显示...鼠标悬浮tooltip显示全部
    hideInSearch: true
  },
  {
    label: "操作",
    valueType: "action",
    width: 100, //当前列宽；配置项支持原生el-table-cloumn的所有属性，都可以在这里配置
    actionList: (_, row) => [
      {
        name: "查看",
        path: `/project/creditAccount/detail`, //跳转路径
        query:{id:row?.id}, //query参数,也支持params等其他传惨方式
        replace:true //replace跳转，默认push 
      },
      {
        name: "删除",
        type:'danger', //同原生el-link的type
        onClick:()=>{} //执行的方法
      }
    ]
  }
];
//获取表格数据
const handleRequest = async params => {
//api是你封装的request请求，它应该是一个promise类型
  const res = await api(params);
  return {
    data: res?.list || [],//必须，表格展示数据
    pagination: {
      total: res?.total || 0//表格分页时必须，同el-pagination原生total
    }
  };
};
</script>

2.表格的操作功能

<pro-table
    :label-width="110"
    headerTitle="用户列表"
    :options="true" //显示列配置
    :request="handleRequest"
    :columns="columns"
/>

（1）只需在上面基础示例组件中添加属性`:options="true"`；

功能项包括：刷新reload，列配置setting（勾选显示隐藏列，上下拖动改变列顺序，列左/右固定，保存/重置列设置）

（2）也可以传需要展示的配置项数组，如：

<pro-table
    //...
    :options={{
       showOptions:['reload']，//仅展示刷新；仅展示设置为['setting'],
    }}
 />

（3）保存的回调函数

<pro-table
    //...
    :options={{
        onSave:newCols=>{}，//newCols是改变后的新columns
    }}
 />

3. 表格的查询

（1）无查询表单

只需在上面基础示例组件中添加属性:search="false"

<pro-table
    :label-width="110"
    headerTitle="用户列表"
    :request="handleRequest"
    :columns="columns"
    :search="false" //无查询表单
/>

（2）某项不显示在查询表单中，在columns中添加`hideInSearch: true`

 {
    label: "个人介绍",
    prop: "textarea",
    hideInSearch: true //在搜索表单中不显示当前列
  },

（3）自定义查询表单项

使用jsx写法：cloumns中配置renderFormItem

{
  label: "自定义查询",
  hideInTable: true,
  renderFormItem: form => (//form是查询表单的form值
      <el-radio-group v-model={form.diySearch}>
          <el-radio-button label="全部"/>
          <el-radio-button label="本周"/>
          <el-radio-button label="本月"/>
          <el-radio-button label="本年"/>
      </el-radio-group>
  )
},

使用template写法时： slot

<pro-table
    :label-width="110"
    headerTitle="用户列表"
    :request="handleRequest"
    :columns="columns"
>
  <template #search="form">//slot名跟cloumns中search配置对应
    <el-radio-group v-model="form.diySearch">
        <el-radio-button label="全部"/>
        <el-radio-button label="本周"/>
        <el-radio-button label="本月"/>
    </el-radio-group>
  </template>
</pro-table>

对应的cloumns中配置：

{
  label: "自定义搜索",
  hideInTable: true, //在表格中不显示此列
  slot: {
    search: "search"//跟slot名对应
  }
},

（4）如果整个查询表单都需要自定义，建议单独配置`searchConfig`属性

<pro-table
    :label-width="110"
    headerTitle="用户列表"
    :request="handleRequest"
    :columns="columns"
    :searchConfig="searchConfig"//searchConfig的配置参数同cloumns配置
/>

（5）表格展示和表格查询不共用字段，filed

 {
    label: "性别",
    filed: "gender",//filed会作为表格查询字段
    prop: "genderStr",//prop会作为表格列内容展示字段
    valueType: "select",
    valueEnum: [
      { label: "男", value: 1, disabled: true },
      { label: "女", value: 2 }
    ]
  },//这个场景常见于后端返回类型名称，但查询需要用value值

（6）必填的搜索表单项（可能很少见...，但我遇到了，就封装进去了...hahah...）

{
  label: "姓名",
  prop: "name",
  required: true //必填的搜索表单项
},

(7) 搜索表单项的默认值defaultValue

{
  label: "姓名",
  prop: "name",
  defaultValue:'111'//点击‘查询’默认传111，点击‘重置’将重置为111
},

4. 表格的分页

（1）无分页

只需在上面基础示例组件中添加属性:pagination="false"

<pro-table
    :label-width="110"
    headerTitle="用户列表"
    :request="handleRequest"
    :columns="columns"
    :pagination="false"//无分页
/>

（2）自定义的分页配置,默认参数如下

<pro-table
    //...
    pagination={{
        currentPage: 1,//当前页，同el-pagination原生的current-page
        pageSize: 10,//每页展示的条数，同el-pagination原生的page-size
        total: 1//同el-pagination原生的total，这里传后端返回的总条数，方便el-pagination做分页
    }}
/>

(3)其他原生的el-pagination属性，都可以:pagination设置，如page-sizes,layout等

<pro-table
  //...
  pagination={{
     pageSizes:[15, 15, 20, 30, 100],//默认[10, 15, 20, 30, 50]
     layout:'total, sizes, prev, pager, next'//默认total, sizes, prev, pager, next, jumper
    }}
/>

5. 表格的列

（1）自定义列标题

使用jsx用法时

{
  label: <span class="fc-red">自定义列标题</span>,//直接label定义为一个demo
  prop:'diyColTitle'
},

使用template写法时： slot

<pro-table
   :label-width="110"
   headerTitle="用户列表"
   :request="handleRequest"
   :columns="columns"
>
 <template #header>
   <span style="color: red">自定义列标题</span>
 </template>
</pro-table>

对应的cloumns中配置：

{
  label: '自定义列标题',//对列标题并不起作用，但当hideInSearch:false时会作为搜索表单项的label
  hideInSearch: true,
  prop: "name",
  slot: {
    header: "header"
  }
},

（2）不显示/动态显示的列

{
  label: "个人介绍",
  prop: "textarea",
  hideInTable: false //不显示当前列
},
{
  label: "个人介绍",
  prop: "textarea",
  hideInTable: showThis.value//根据const showThis=ref(false) 动态显示当前列
},

（3）自定义列内容

使用jsx用法时：cloumns中配置render

{
  label: "自定义列",
  hideInSearch: true,//在搜索表单中不展示
  render: (item, row, index) => //item：当前配置项，row：当前行数据，index：当前行index
      <div>
        <p>姓名：{row?.name}</p>
        <p>年龄：{row?.age}</p>
        <p>index：{index}</p>
      </div>
},

使用template写法时： slot

<pro-table
    :label-width="110"
    headerTitle="用户列表"
    :request="handleRequest"
    :columns="columns"
>
  <template #diy="{row,$index}">//el-table原生的scope:{row,$index}
    <div>
      <p>姓名：{{ row.name }}</p>
      <p>年龄：{{ row.age }}</p>
      <p>index：{{ $index }}</p>
    </div>
  </template>
</pro-table>

对应的cloumns中配置：

{
  label: "自定义列",
  hideInSearch: true,//在搜索表单中不展示
  slot: {
    default: "diy"//跟slot名对应
  }
},

（4）列标题小贴士：toolTip

{
  label: "小贴士",
  prop: "name",
  hideInSearch: true,
  toolTip:`<ul>
              <li>1.当需要dom时，请用反向单引号包裹你的元素</li>
              <li>2.使用普通引号（单/双引号），将作为字符串渲染</li>
          </ul>`
},

6. 表格的汇总

（1）默认汇总，只需在上面基础示例组件中添加属性`:summary="{showSummary: true}"`

<pro-table
    :label-width="110"
    headerTitle="用户列表"
    :request="handleRequest"
    :columns="columns"
    :summary="{showSummary: true}"//展示表格汇总行，同原生el-table的show-summary属性
/>

对应的cloumns中配置：

{
  label: "年龄",
  prop: "age",
  valueType: "number",
  summary: true,//为true表示采用默认汇总，使用prop值为参与计算的字段名，且结果保留‘0位小数’的
},

（2）自定义汇总计算配置，可以通过配置summary改变

{
  label: "金额",
  prop: "moneyStr",//此时后端提供一个货币化的字符串供前端显示，显然不能做汇总计算
  valueType: "number",
  summary: {
      prop:'money'//配置prop来定义汇总计算使用的字段名
      precision:2,//配置汇总结果保留小数位
  },
},

（3）自定义汇总计算方法:summaryMethod

<ProTable
    //...
    summary={{
        showSummary: true,//当不为true时不展示汇总行，也不会执行原生summary-method方法
        summaryMethod:param=>{retrun [...]}, //用法同el-talbe原生summary-method方法用法
    }}
/>

（4）自定义汇总行名称:summaryText

<ProTable
    //...
    summary={{
        showSummary: true,
        summaryText:'总计：',//默认‘汇总：’
    }}
/>

（5）你甚至可以拿到默认汇总计算得来的结果集：getSummary：val=>{}

<ProTable
  //...
  summary={{
    showSummary: true,//不为true时不执行原生summary-method，也就不能用getSummary拿到计算结果集
    getSummary:val=>state.summaryObj=val//当需要结果集又不展示汇总行，建议使用css隐藏掉汇总行
  }}
/>

7. 表格顶部按钮

jsx语法：传toolBarRender属性

<ProTable
    labelWidth={110}
    headerTitle="用户列表"
    columns={columns}
    request={handleRequest}
    toolBarRender={[//直接作为属性传一个数组
      <el-button type="primary">新增</el-button>,
      <el-button type="primary">导出</el-button>
    ]}
 />

template语法：toolBarRender slot

<pro-table
    :label-width="110"
    headerTitle="用户列表"
    :request="handleRequest"
    :columns="columns"
>
  <template #toolBarRender>
    <p class="w-full flex justify-end mr-2"> //需要自定义样式哦
      <el-button type="primary"> 新增</el-button>
      <el-button type="primary"> 导出</el-button>
    </p>
  </template>
</pro-table>

8. 表格顶部tip

jsx语法:传tableAlertRender属性

<ProTable
    labelWidth={85}
    headerTitle="用户列表"
    columns={columns}
    request={handleRequest}
    tableAlertRender={//直接作为属性传一个dom
        <el-row gutter={20}>
          {extraList?.map(el => (
            <el-col {...layout}>
              <label>{el.label}：</label>
              <span>{state.summary?.[el?.value] || 0}</span>
            </el-col>
          ))}
        </el-row>
    }

template语法：tableAlertRender slot

<pro-table
    :label-width="110"
    headerTitle="用户列表"
    :request="handleRequest"
    :columns="columns"
>
  <template #tableAlertRender>
    <el-row :gutter="20">
      <template v-for="el in extraList" :key="el.value">
        <el-col :xs="8" :sm="6" :md="4" :xl="4">
          <label>{{ el?.label }}：</label>
          <span>{{ state.summary?.[el?.value] || 0 }}</span>
        </el-col>
      </template>
    </el-row>
  </template>
</pro-table>

9. 可选择的表格

（1）多选

<pro-table
    :label-width="110"
    headerTitle="用户列表"
    :request="handleRequest"
    :columns="columns"
    :rowSelection="{ rowKey: 'age', onSelectionChange}"//rowKey：同el-tabel原生rowKey属性，onSelectionChange同el-tabel原生selection-change事件用法
/>

(2)单选

<ProTable
    //...
    :rowSelection="{ rowKey: 'age', type: 'radio'}"//type:'radio'单选
/>

10. 支持所有el-table原生的插槽等，同原生用法一样（不出意外它未来添加的也会支持（因为组件内部`v-slots={_this.slots}`一招搞定所有），出意外就是组件有bug了）

（1）expand

（2）empty

jsx语法

<ProTable
    //...
    empty={() => <p>暂无数据</p>}
    expand={({row, $index}) => <p style="color: red">{row.name}表格的扩展</p>}
/>

template语法

<ProTable
   //...
>
  <template #expand="{ row, $index }">
    <p style="color: red">{{row.name}}表格的扩展</p>
  </template>
  <template #empty>
    <p>空空如也</p>
  </template>
</ProTable>

11. 完整用法示例

（1）jsx语法

<script lang="jsx" name="ProTableJsx">
import {defineComponent, reactive} from "vue";
import {ProTable} from "el-easytable";

const layout = {xs: 8, sm: 6, md: 4, xl: 4};
const extraList = [
  {label: "签订重量(吨)", value: "sumSellNumStr"},
  {label: "实提重量(吨)", value: "sumRealWeightStr"},
  {label: "收款总额(元)", value: "sumReceiveAmountStr"},
  {label: "实提总额(元)", value: "sumRealAmtStr"},
];
const columns = [
  {label: '姓名', prop: "name"},
  {
    label: "性别",
    field: "gender",
    valueType: "select",
    valueEnum: () => [
      {label: "男", value: 1, status: 'success'},
      {label: "女", value: 2, status: 'error'}
    ]
  },
  {
    label: "年龄",
    prop: "age",
    valueType: "number",
    max: 150,
    min: 1,
    precision: 0,
    summary: true,
  },
  {
    label: "出生年月",
    prop: "date",
    valueType: "date"
  },
  {
    label: "籍贯",
    prop: "areaSelect",
    valueType: 'areaSelect',
    address: 'address',
    width:200,
    hideInSearch: true
  },
  {
    label: "小贴士",
    prop: "name",
    hideInSearch: true,
    toolTip:`<ul>
                <li>1.当需要dom时，请用反向单引号包裹你的元素</li>
                <li>2.使用普通引号（单/双引号），将作为字符串渲染</li>
            </ul>`
  },
  {
    label: <span>自定义列标题</span>,
    prop: "name",
    hideInSearch: true
  },
  {
    label: "超长隐藏",
    prop: "ellipsis",
    valueType: "ellipsis",
    hideInSearch: true
  },
  {
    label: "个人介绍",
    prop: "textarea",
    valueType: "textarea",
    hideInSearch: true
  },
  {
    label: "自定义查询",
    hideInTable: true,
    renderFormItem: scope => (
        <el-radio-group v-model={scope.value}>
            <el-radio-button label="全部"/>
            <el-radio-button label="本周"/>
            <el-radio-button label="本月"/>
        </el-radio-group>
    )
  },
  {
    label: "自定义渲染列",
    prop: "diy",
    hideInSearch: true,
    render: (item, row, index) => <div>
      <p>姓名：{row?.name}</p>
      <p>年龄：{row?.age}</p>
      <p>index：{index}</p>
    </div>
  },
  {
    label: "操作",
    valueType: "action",
    actionList: (_, row) => [
      {
        name: "查看",
        path: `/project/creditAccount/detail?id=${row.id}`
      },
      {
        name: "禁用",
        type: "danger"//同原生el-link的type
      }
    ]
  }
];

export default defineComponent({
  setup() {
    const state = reactive({
      selectList: [],
      summary: {}
    });
    const handleRequest = async params => {
      const res = await api(params);
      return {
        data: res?.list || [],
        pagination: {
          total: res.total
        }
      };
    };
    return () => (
          <ProTable
              labelWidth={85}
              headerTitle="用户列表"
              columns={columns}
              options={true}
              toolBarRender={[
                <el-button type="primary">新增</el-button>,
                <el-button type="primary">导出</el-button>
              ]}
              tableAlertRender={<el-row gutter={20}>
                {extraList?.map(el => (
                  <el-col {...layout}>
                    <label>{el.label}：</label>
                    <span>{state.summary?.[el?.value] || 0}</span>
                  </el-col>
                ))}
              </el-row>}
              dataSource={state.data}
              request={handleRequest}
              empty={() => <p>暂无数据</p>}
              summary={{showSummary: true}}
              rowSelection={{rowKey: "age", type: "radio", onSelectionChange:val => {state.selectList = val}}}
          />
    );
  }
});
</script>

（2）混合用法

如果你习惯使用template语法，但同时又喜欢jsx的灵活简便，那你也可以将用到的jsx部分抽出来一个.jsx文件：

index.vue

<template>
    <pro-table
      headerTitle="复合表格"
      :options="true"
      :request="handleRequest"
      :columns="columns"
      :summary="{
        showSummary: true
      }"
      :toolBarRender="toolBarRender"
      :rowSelection="{ type: 'radio', rowKey: 'age', onSelectionChange }"
    />
</template>

<script setup lang="ts" name="ProTableDemo">
import { reactive } from "vue";
import { ProTable } from "el-easytable";

import {toolBarRender,columns} from './index.jsx'

const state = reactive({
  selectList: [],
  summary: {}
});

const handleRequest = async params => {
  const res = await api({ ...params, type: 1 });
  return {
    data: res.list || [],
    pagination: {
      pageSize: res.pageSize,
      pageNum: res.pageNum,
      total: res.total
    }
  };
};

const onSelectionChange = val => {
  state.selectList = val;
};
</script>

index.jsx

export const columns = [
  { label: "姓名", prop: "name", required: true, initValue: "默认值" },
  {
    label: "性别",
    filed: "gender",
    prop: "genderStr",
    valueType: "select",
    options: [
      { label: "男", value: 1, disabled: true },
      { label: "女", value: 2 }
    ]
  },
  {
    label: "年龄",
    prop: "age",
    valueType: "number",
    max: 150,
    min: 1,
    precision: 0,
    summary: true
  },
  {
    label: "超长隐藏",
    prop: "ellipsis",
    valueType: "ellipsis",
    hideInSearch: true
  },
  {
    label: "日期",
    prop: "date",
    size: "default",
    width: 80,
    valueType: "date"
  },
  {
    label: "diy查询",
    prop: "disabled",
    valueType: "files",
    hideInTable: true,
    renderFormItem: scope => (
      <el-radio-group v-model={scope.value}>
          <el-radio-button label="全部" />
          <el-radio-button label="本周" />
          <el-radio-button label="本月" />
      </el-radio-group>
    )
  },
  {
    label: "diy渲染列",
    prop: "diy",
    hideInSearch: true,
    render: (item, row, index) => (
      <div>
        <p>列名：{item.label}</p>
        <p>姓名：{row.name}</p>
        <p>年龄：{row.age}</p>
        <p>序号：{index}</p>
      </div>
    )
  },
  {
    label: "操作",
    valueType: "action",
    width: 100,
    actionList: (_, row) => [
      {
        name: "查看",
        id: "btn_creditAccountList_view",
        path: `/project/creditAccount/detail?id=${row.id}`
      },
      {
        name: "禁用",
        type: "danger",
        id: "btn_creditAccountList_refund"
      }
    ]
  }
];
export const toolBarRender = onClick => {
  return [
    <el-button type="primary" onClick={() => onClick("new")}>
      新增
    </el-button>,
    <el-button type="success" onClick={() => onClick("examine")}>
      批量审核
    </el-button>
  ];
};

三、完整api用法介绍

1.插槽

插槽名	描述
toolBarRender	表格上方按钮
tableAlertRender	表头汇总行
expand	表格每行的嵌套
自定义，需要与columns种的slot中对应	表格每列的插槽，具体参见 columns slot属性

2.属性

（1）组件的属性

ProTable支持所有element plus Table中所有的属性

以下所列是基于其原有属性的扩展

属性名	默认值	类型	描述	用法
columns	`[]`	Array	表格的表头以及对应列表单类型字段配置的数组具体参见columns属性	`columns="[{label:'姓名',prop:'name'},...]"`
rowSelection	`null`	Object	是否可选择行,值为对应的配置项其他选择相关属性均可添加，其他用法参见rowSelection属性	`rowSelection="{rowKey: "id",type:'radio',onSelectionChange:val=>{},selectable:val=>{}}"`
toolBarRender	`null`	Object	表格上方固定的操作按钮，自动右对齐表格，多个间会有间距，接收一个元素数组	仅适用于jsx语法：`toolBarRender={[<el-button>下载模版</el-button>,<el-button>导入用户</el-button>]}`
tableAlertRender	`null`	Object	表格上方固定提示内容,会自动有背景及其间距样式（如：表格内容不分页的合计）	仅适用于jsx语法：`tableAlertRender={<p>总销售金额：100</p>}`
summary	`null`	Object	表格最后一行的汇总 `showSummary`为true时展示汇总行，summaryMethod不传时，默认会将`columns`配置项中`summary`属性为逻辑`true`的那列进行合计	`summary="{showSummary: true,summaryMethod:()=>[],getSummary=summary=>{}`
expand	`null`	DOM Element	嵌套表格的插槽将会接收两个参数`row 当前行数据项`, `index 当前列号`，一个表格组件，	仅适用于jsx语法：`expandRender="{(scope)=><EditTable/>"`
pagination	看描述	Object	默认值`{pageNum:1,pageSize:7,total:1}`，分页配置，当`pagination={false}`时不展示分页	`pagination="{pageNum:1,pageSize:15,total:1}"`
request	`null`	Function	动态获取数据的异步方法，会在组件初始化、切换pagination分页时、搜索search查询时自动触发callback方法，并将参数带回,具体参见request属性	`request={params=>{}}`
params	`null`	Object	request请求的额外参数，会在request触发时，跟分页和查询的参数一起返回到callback方法入参,也会是搜索表单的默认值配置	`params="{isBigContract:true}"`
manualRequest	`true`	Boolean	是否手动请求接口，为true则不会初始化时触发request请求	`manualRequest={true}`
search	`true`	Boolean	是否显示表格上方的搜索表单，默认会将`columns`配置项中`hideInSearch`属性值不为`true`、`valueType`属性值不为`index、action`的其他所有列作为搜索项显示在搜索表单，并以`valueType`的类型(默认为`input`)为表单类型	`search={false}`
labelWidth	130	Number｜String	搜索表单的labelWidth属性	`labelWidth={200}`
flex	4	Number	搜索表单的列数，默认4，可传值遵循element ui 栅栏
searchConfig	`null`	Array	自定义的search配置	`searchConfig="[{label:'姓名',prop:'name',valueType:'select'}]"`
headerTitle	""	String	表格标题	`headerTitle="用户列表"`
options	`false`	Boolean｜Object	表格配置项	默认为false不展示,可以设置为true展示，也可以传需要展示的配置项对象，如：`{showOptions:['setting,'reload'],onSave:columns=>{}}`
dataSource	`[]`	Array	表格静态数据源	`dataSource="state.tableData"`

request属性

<ProTable
    params={{type: query.type}}
    request={async (params) => {
        const res = await getUserList({...params, code: '001'})
        return {
            data: pageInfo.list, //必须return一个data出去，将会自动作为tabel的data属性值
            pagination: {
                total: res?.total//当pagination不为false时，必须return一个pagination出去，将会自动计算总页数，和当前页数
            }
        }
    }}/>

rowSelection属性


<ProTabel
    :rowSelection="{ 
          type: 'radio',//默认多选，type=radio为单选
          rowKey: 'age',//关键字段key
          onSelectionChange:(selection)=>{},
          selectable:(row, index)=>{},//selectable用于控制可筛选行的方法
          }"
/>

（2） columns属性的配置项

columns支持element plus Table中对应的所有的属性

以下所列是基于其原有属性的扩展

属性名	类型	描述	用法
label	String	列标题，同时当表格的`search`属性不为`false`，且当前项`hideInSearch`属性值不为`true`时，也将作为搜索表单的表单`label`字段值	`label:"姓名"`
prop	String	列字段名称，同时当表格的`search`属性不为`false`，且当前项`hideInSearch`属性值不为`true`时，也将作为搜索表单的表单`prop`字段值	`label:"name"`
hideInSearch	Boolean	该项是否为搜索项，默认`false`，当为`true`时该项将不会出项在搜索表单	`hideInSearch:true`
hideInTable	Boolean	该项是否在表单中隐藏，默认`false`，当为`true`时该项将不会出项在表格中	`hideInTable:true`
filed	String	当表格显示所用`prop`与搜索表单所用`prop`不一致时，表单将优先使用`field`作为搜索表单的表单`prop`字段值	`field:"userName"`
valueType	String	搜索表单的类型，默认为`input`，具体参看，具体参见 valueType属性	`valueType:"select"`
searchRender	`null`	Function	自定义的搜索表单，jsx语法 `(scope)=>{}`
required	`null`	Boolean	当前查询表单项是否必填
toolTip	`null`	String｜Element	列标题小贴士
defaultValue	`null`	Any	或者可编辑表格时对应表单字段默认值
render	Function	自定义列单元格显示内容，该方法将得到一个callback方法，3个参数,具体参见 render属性	`render:(item,row,index)=>{}`
slot	Object	表格每列插槽	`slot: {default: 'diy',header:'diyHead',search:'searchName'}`default是列内容，header是列头 ,search是搜索表单项,作用域值scope和action(valueType为action时，有两个方法add(initObj),remove(index))
summary	Object｜Boolean	当为`逻辑true`时该列将汇总所有值，也可接收一个配置对象,具体参见 summary属性	`summary:true`
actionList	Array｜Function	表格操作列集合，会自动做权限控制，函数类型会返回一个callback，3个参数	`actionList:(item, row, index)=>[]` ，具体参见 actionList属性

valueType属性

属性名	描述
select	同原生el-select
date	同原生el-datePicker
time	同原生el-dateTimePicker
input	同原生el-input ，valueType属性的默认值，为此值时可不写
number	同原生el-input-number，为null展示'0.00'（小数位由precision属性设置）为非'-'
index	索引
ellipsis	超出单行宽度... 悬浮展示全部
textarea	文本域，超出三行宽度... 悬浮展示全部
action	操作
currency	仅proTable，默认两位消暑的数值
areaSelect	对应省市区级联选择，内部使用element-china-area-data插件作为数据源

valueType:'areaSelect'的具体用法

{
    label: '起运地',
    required: true,
    prop: 'startPlaceCodeList',//回显字段，值需要是[省code,市code,区code]类型
    valueType: 'areaSelect',
    address: 'startAddress',//address：详细地址字段
    onChange: (val, row) => {
    //val返回一个对象，你可以任意处理提交给后端
    /*
      {
        codes:[省code,市code,区code],
        names:[省，市，区]     
      }
    */
      const { codes, names } = val || {}
      row.startPlace = names?.join?.('/')
      row.startPlaceCode = codes?.join?.('/')
    }
  }

actionList属性

属性名	类型	描述	用法
name	String	操作项名称	`name:"新增"`
path	String	操作项跳转链接	`path:"/detail/?id=${row.id}"`
hide	Boolean	是否隐藏	`hide:true`
replace	Boolean	是否使用replace方式跳转，默认push方式	`replace:true`
query，params	Object	跳转参数	同vue原生
onClick	Function	操作方法，当你的操作不是简单的跳转，比如操作弹窗时，可以用此方法	`onClick:()=>{}`

{
    actionList:(item, row, index) => [
        {
            name: '',
            id: 'new',
            path: "/supplyChain/accountsReceivableDetail/new?id=${row.id}",//这里双引号应为``
            hide: row.status === 1,
            onClick:
                () => {
                    downloadFun(row)
                }
        }
    ]
}
// item：当前配置项对象  
// row：当前行数据项 
// index：当前列index

（3）组件的方法

方法名	接收参数类型	描述	用法
reloadAndRest	Object	查询参数、分页参数重置并重新执行request	`refs.value?.reload({type:1})`
reload	Object	执行request(查询参数、分页参数不会重置)	`refs.value?.reloadAndRest({type:1})`
tableRef	-	获取el-table原始ref对象,通过它返回的值可以拿到所有el-table抛出的方法	`refs.value?.tableRef()`

具体用法

const refs = ref(null)

//1.加载：当需要查询条件和分页保持不变的刷新时可以用这个方法
const reload = () => {
    refs.value?.reload({type: 1})
}

//2.刷新：当需要重置查询条件和分页并加载时可以用这个方法
const reloadAndRest = () => {
    refs.value?.reloadAndRest({type: 1})
}

return () => <div>
    <ProTable ref={refs}/>
    <button onClick={reload}>1.加载</button>
    <button onClick={reloadAndRest}>2.刷新</button>
</div>

四、vue3使用jsx需要做什么

这里基于vite打包工具介绍

1.安装支持jsx编译的插件

npm i @vitejs/plugin-vue-jsx -S

2.配置vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(),vueJsx()],
})

篇幅过长，EditTabel下一篇介绍

el-easytable：Element plus+vue3实现的ProTable,ProEditTable

一、使用

1.安装

2.引用

二、proTable 用法示例

1.基础用法

2.表格的操作功能

（1）只需在上面基础示例组件中添加属性:options="true"；

（2）也可以传需要展示的配置项数组，如：

（3）保存的回调函数

3. 表格的查询

（1） 无查询表单

（2）某项不显示在查询表单中，在columns中添加hideInSearch: true

（3）自定义查询表单项

（4）如果整个查询表单都需要自定义，建议单独配置searchConfig属性

（5）表格展示和表格查询不共用字段，filed

（6）必填的搜索表单项（可能很少见...，但我遇到了，就封装进去了...hahah...）

(7) 搜索表单项的默认值defaultValue

4. 表格的分页

（1）无分页

（2）自定义的分页配置,默认参数如下

(3)其他原生的el-pagination属性，都可以:pagination设置，如page-sizes,layout等

5. 表格的列

（1）自定义列标题

（2）不显示/动态显示的列

（3）自定义列内容

（4）列标题小贴士：toolTip

6. 表格的汇总

（1）默认汇总，只需在上面基础示例组件中添加属性:summary="{showSummary: true}"

（2）自定义汇总计算配置，可以通过配置summary改变

（3）自定义汇总计算方法:summaryMethod

（4）自定义汇总行名称:summaryText

（5）你甚至可以拿到默认汇总计算得来的结果集：getSummary：val=>{}

7. 表格顶部按钮

8. 表格顶部tip

9. 可选择的表格

（1）多选

(2)单选

10. 支持所有el-table原生的插槽等，同原生用法一样（不出意外它未来添加的也会支持（因为组件内部v-slots={_this.slots}一招搞定所有），出意外就是组件有bug了）

（1）expand

（2）empty

11. 完整用法示例

（1）jsx语法

（2）混合用法

三、完整api用法介绍

1.插槽

2.属性

（1）组件的属性

request属性

rowSelection属性

（2） columns属性的配置项

valueType属性

valueType:'areaSelect'的具体用法

actionList属性

（3）组件的方法

四、vue3使用jsx需要做什么

1.安装支持jsx编译的插件

2.配置vite.config.js

（1）只需在上面基础示例组件中添加属性`:options="true"`；

（1）无查询表单

（2）某项不显示在查询表单中，在columns中添加`hideInSearch: true`

（4）如果整个查询表单都需要自定义，建议单独配置`searchConfig`属性

（1）默认汇总，只需在上面基础示例组件中添加属性`:summary="{showSummary: true}"`

10. 支持所有el-table原生的插槽等，同原生用法一样（不出意外它未来添加的也会支持（因为组件内部`v-slots={_this.slots}`一招搞定所有），出意外就是组件有bug了）