前言：el-easytable是基於vue3jsx element ui參照antd design pro實現的複合表格和可編輯表格，裏面的屬性和用法基本一致，但是由於vue 的數據是雙向綁定的所以可編輯表格也會有所不同,好的意見評論區留言。

組件同時支持vue3 jsx 和 template，個人建議複雜表格最好使用jsx用法，因爲受語法限制template代碼量往往更多，處理更復雜

一、使用

1.安裝

npm i el-easytable -S

2.引用

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

二、ProTable 用法示例（EditTable下篇介紹）

源碼下載或查看md文檔待更新

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	是否可選擇行,值爲對應的配置項<br/>其他選擇相關屬性均可添加，其他用法參見rowSelection屬性	`rowSelection="{rowKey: "id",type:'radio',onSelectionChange:val=>{},selectable:val=>{}}"`
toolBarRender	`null`	Object	表格上方固定的操作按鈕，自動右對齊表格，多個間會有間距，接收一個元素數組<br/>	僅適用於jsx語法：`toolBarRender={[<el-button>下載模版</el-button>,<el-button>導入用戶</el-button>]}`
tableAlertRender	`null`	Object	表格上方固定提示內容,會自動有背景及其間距樣式（如：表格內容不分頁的合計）	僅適用於jsx語法：`tableAlertRender={<p>總銷售金額：100</p>}`
summary	`null`	Object	表格最後一行的彙總<br/>`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}`，<br/>分頁配置，當`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()],
})

基於vue3jsx element ui實現的類似react antd design Pro的ProTable 和EditableProTable

一、使用

1.安裝

2.引用

二、ProTable 用法示例（EditTable下篇介紹）

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）組件的屬性

（2） columns屬性的配置項

（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了）