“老哥，聽說你寫的頁面挺多的，我這兒有一個頁面，你覺得你需要多少程式碼？”
“我看看，也還行吧，不就是個查詢表格嘛，現在大家都用 ProComponent 了，用那個寫一下很快的。我想想，差不多 200 行左右就可以了吧。”
“那個呀，我知道，官方的二次封裝元件庫，200 行就可以了嗎？嗯，可以。等等，你說的程式碼是否包含了操作按鈕？”
“操作按鈕？是指你圖上的 【新增】【詳情】這些按鈕嗎？”
“是啊。”
“點了之後長啥樣呀，你也沒給我看呀！”
“哦，差不多長這個樣。”
“哦～ 這樣子啊，那這個簡單，不就是個彈窗表單嘛，撐死再加個 100 行吧。”
“那【刪除】呢？”
“就這。10 行就搞定了吧。”
“哈哈，你彆著急嘛，還有批量刪除呢！”
“哦哦，這也沒多難啊，大部分都是表格自帶的 Api，刪除完重新整理下表格請求就完事兒了。無非就是記錄下選項嘛，再給個 10 行我覺得就差不多了。不過我看你這勾選之後，頁面下面還有個條，把【批量刪除】按鈕放那裡了，有點意思，不過也沒多難，再加個 20 行左右我覺得差不多了。”
“哈哈，是的，我算算，這差不多已經 340 行了吧。”
“是啊，寫這樣一個頁面的話，這點程式碼量很正常。”
“那如果翻頁後，仍然保留上個頁面的選項呢？”
“這個呀，現在哪有人做這個呀，這都是現成的元件，你不嫌麻煩我還嫌麻煩呢，而且又不是必須的，愛誰誰做。”
“你就說你會不會吧！”
“你是故意找茬是吧！再說了，這也不難，antd 表格不是有個 preserveSelectedRowKeys 屬性嗎，我覺得可以用那個實現，或者監聽下表格的選擇事件，存個變數就好了。實在不行，就點頁面單個刪除唄，也沒多麻煩吧。”
“說是這麼說，確實也沒必要，但我覺得有更好，如果要刪除多個的話，每次刪除總是要多點幾次，而且刪除完之後，資料不是沒了嘛，那第二頁的資料就會跑到第一個頁面來，就會擔心自己會不會刪錯。”
“還行吧，只要你不嫌累，你就寫吧。我覺得也沒啥，如果真要做，用那個 api 就好了，頂多再加個 20 行吧。”
“哦！對了，我忘記說了，這個數字懸浮上去是能看到選項的。”
“...你玩的還挺花，資料都有，搞個 Popover 套一下，就可以了吧。”
“是的，這麼樣一算的話，差不多有 400 行程式碼了吧。”
“嗯，你需求多嘛，差不多差不多。”
“哈哈，這個頁面我總共花了 134 行程式碼，你覺得可行
“？？？你怎麼做到的，給我看看。“
“我看了一下，有意思，這個元件用了一個大 json，把配置傳進去了是吧，這種封裝還挺常見的。”
“是的，你看這是其中一個片段，表格的頂部查詢，只需要指定 search: true 就可以了。”
{
title: '英文名',
key: 'en'
search: true
}“這樣子啊，那上面我看有 placeholder 呀，怎麼沒看你傳進去。”
“哦，那個是自動生成的，像這裡，會生成"請輸入英文名"。”
“那如果要自定義呢？”
“當然也可以，需要這樣子寫。”
{
title: '英文名',
key: 'en'
search: {
placeholder: '請輸入英文名'
}
}“哦～ 這還能是個物件是吧，那如果上面是個選擇框呢？”
“也簡單，新增 options 和 type: 'select' 就可以了。”
{
title: '職業',
key: 'class',
type: 'select',
options: [
{ label: '近衛幹員', value: '1' },
{ label: '狙擊幹員', value: '2' },
{ label: '術師重灌', value: '3' },
{ label: '醫療幹員', value: '4' },
{ label: '重灌幹員', value: '5' },
{ label: '輔助幹員', value: '6' },
{ label: '特種幹員', value: '7' },
{ label: '先鋒幹員', value: '8' }
],
search: true
}“你這 options 和 type 為什麼沒有放在 search 物件裡面的呀？”
“哈哈，這你就不知道了吧，因為這樣子寫的話，表格也可以用這個配置，寫在 search 物件裡面的話，就只能查詢區域自己用了。”
“表格也可以用這個配置？表格要這倆有啥用。”
“表格這一列，可以通過 options 翻譯，假如資料是個 1，那麼這一列就會根據 options 去尋找這個 label，這時候對應的 label 是 近衛幹員，所以頁面上顯示的就是 近衛幹員。另外如果表格有篩選，新增 filter: true 就會出現篩選了。”
“可以，還挺方便的，那 type 呢？這東西表格用不到吧。”
“是的，這個的話，其實是給 dialog 彈窗編輯用的。這樣子的話可以讓彈窗裡面也展示一個選擇框了。”
{
title: '職業',
key: 'class',
type: 'select',
options: [
{ label: '近衛幹員', value: '1' },
{ label: '狙擊幹員', value: '2' },
{ label: '術師重灌', value: '3' },
{ label: '醫療幹員', value: '4' },
{ label: '重灌幹員', value: '5' },
{ label: '輔助幹員', value: '6' },
{ label: '特種幹員', value: '7' },
{ label: '先鋒幹員', value: '8' }
],
search: true,
+ dialog: true
}“哦哦！明白了，指定了 dialog: true 後，就會在彈窗裡面顯示了是吧。”
“是的，那如果只在彈窗裡展示，而表格不展示呢？”
“那可以這樣子做。指定 table: false 就可以了。”
{
title: '職業',
key: 'class',
type: 'select',
options: [
{ label: '近衛幹員', value: '1' },
{ label: '狙擊幹員', value: '2' },
{ label: '術師重灌', value: '3' },
{ label: '醫療幹員', value: '4' },
{ label: '重灌幹員', value: '5' },
{ label: '輔助幹員', value: '6' },
{ label: '特種幹員', value: '7' },
{ label: '先鋒幹員', value: '8' }
],
dialog: true,
+ table: false
}“明白了。這是把彈窗、表格、查詢揉在一起了是吧，對了，我怎麼沒有看到新增開啟彈窗的程式碼呢？”
“那個呀，那個需要再加點程式碼。把 addApi 作為請求介面傳進去，再指定 action="add" 就好了？”
<AySearchTable
title="Amiya 增刪改查"
dialogFormExtend={{
fields: fields,
addApi
}}
>
<AyAction action="add">新增</AyAction>
</AySearchTable>“這也可以？為什麼？難到不需要監聽按鈕點選事件，然後控制彈窗顯示，再請求介面，之後關閉彈窗重新整理頁面嗎？”
“是的，這裡預設認為彈窗和表格共用一個配置，且彈窗新增大多都是千篇一律的，所以把所有的操作封裝了一下，就只剩下這麼點了。當然如果太過複雜，或者跟表格都沒有什麼可以共用的列，就再定義一個 'fields: dialogFields'，和表格完全分開用倆 fields，各用各的。”
“哦哦，可以可以，那我理解了，修改也是同理吧。”
“是的，編輯的時候，不是會有預設值嗎？此時我們把 record 傳進去，當作表單的預設值就可以了。”
const ctrl: AyTableCtrlField = {
render: (value: string, record: Record) => {
return (
<AyCtrl>
<AyAction record={record} action="update">
編輯
</AyAction>
</AyCtrl>
)
}
}
<AySearchTable
title="Amiya 增刪改查"
dialogFormExtend={{
fields: fields,
addApi
}}
/>“可以，可以！這個元件把常用的操作都變成指令了啊。”
“是的呀，如果你的詳情是需要請求介面的，那就不需要 record 了，刪掉之後改成 detailApi 和 detailParams， 分別是請求的介面和請求的引數，action="view" 指令會自動的把請求返回的資料，作為開啟彈窗後表單的預設值的。”
<AyAction detailParams={record.sort_id} detailApi={detailApi} action="view">詳情</AyAction>“明白了，非常的棒！對了你剛剛還說到分頁刪除了，用這個元件是不是也很簡單啊？”
“是的，我給你看一下，這個多個幾步，第一步，先新增 selectionType="checkbox" 開啟勾選；第二步，新增 selectShowKey="cn"，讓氣泡懸浮時用它來決定展示選中的名稱，並用 tag 標籤裹住，因為 tag 標籤可以刪除的，這樣子翻頁之後也可以點選 tag 標籤上面的 X，來取消選項，不用再翻到上一頁取消選擇了；第三步，在刪除按鈕上新增 action="delete" 屬性，批量刪除上新增 action="batch-delete" 屬性，標籤上新增 deleteApi={deleteApi} 介面，就可以完成刪除和批量刪除的動作了。”
const ctrl: AyTableCtrlField = {
render: (value: string, record: Record) => {
return (
<AyCtrl>
<AyAction record={record} action="delete">
刪除
</AyAction>
</AyCtrl>
)
}
}
<AySearchTable
title="Amiya 增刪改查"
selectionType="checkbox"
rowKey="sort_id"
ctrl={ctrl}
selectShowKey="cn"
deleteApi={deleteApi}
>
<AyAction action="batch-delete">批量刪除</AyAction>
</AySearchTable>“哦哦，這樣子就可以了嗎？那還挺方便的，畢竟不需要自己寫一堆程式碼來寫。對了，我剛才看了下程式碼，上面有個 renderType: 'html'，這是什麼作用。”
{
title: '描述',
key: 'feature',
width: 200,
renderType: 'html'
}“你猜猜？”
“把這一列渲染成 html 之類的？”
“是呀，除此之外，還有 unit datetime state 等等型別，你可以看看這個。”
“可以，那如果我要的這裡面沒有呢？”
“就等著你問這個呢，看來你用過其它的二次封裝呀，這個元件提供兩種方式，第一種可以指定 render 方法。”
{
title: '姓名',
key: 'cn',
search: true,
dialog: {
required: true
},
table: {
// 渲染自定義內容
render: (text: string, record: Record) => {
return (
<div>
<div>{record.cn}</div>
<div>{record.en}</div>
<div>{record.jp}</div>
</div>
)
}
}
},“第二種，可以全域性註冊，註冊完之後，可以像 renderType: 'star' 這樣子使用。”
import { registerTableRender, RenderProps } from 'amiya'
/**
* @decs 註冊 renderType
* @param renderTypeName string 註冊型別名字
* @param text string 當前 col 的資料
* @param record object 當前 row 的資料
* @param field 當前配置配置項
*
* @returns ReactNode
*/
registerTableRender('renderTypeName', ({ text, record, field }: RenderProps) => {
return <span>{text}</span>
})
// 實際使用
const fields = [
{
renderType: 'renderTypeName' // 已經註冊過後的名字
}
]“好傢伙，這跟我直接 render 也沒什麼區別嘛，不過用註冊的方法，把 render 寫在其它公共的地方的話，確實會讓當前頁面乾淨一點。”
“是的，兩種方式自由選擇。你看這樣子一套下來，你看，是不是省了很多程式碼，如果你用 jsx 語法糖的話會更省，那樣子只需要 90 行程式碼了。”
“對哦，我見到的其它二次封裝就是少了這個，都用 json，用起來編輯器右邊空白一大片，程式碼又拉的老長，挺不爽的，你這樣子寫法我挺喜歡的，我跟他們提建議，他們都不聽的，還云云這樣容易控制什麼的。”
<AyFields>
<AyField
title="頭像"
key="icon"
width={80}
align="center"
renderType="image"
/>
<AyField title="姓名" key="cn" search />
<AyField title="英文名" key="en" search dialog table={false} />
{// ...}
</AyFields>“真能省，還沒見過這麼能省的，不過，這個元件封裝的這麼多，別人會用嗎？用的明白嗎？”
“確實，如果不介紹介紹的話，沒人用的明白。所以這個元件支援完整的 TypeScript 提示，也準備了文件，詳細地介紹了表格的使用方式，你看左側那一堆選單，都是在介紹表格 api 的。”
“而且，也有完整的頁面級別的示例，也可以做參考。”
“我看到了，這是個二次封裝的元件庫吧，我看還有其它元件，等我回頭用用看體驗一下。”
“好的，等你訊息。”