100左右来实现一个查找表？真或假？一起来感受阿米娅的魅力吧

“哥，听说你写了很多页，我这边有个页，你觉得你需要多少代码？”“我看看，还行吧，不就是一个查询表单吗？我已经用过ProComponent了，用它写起来很快，我觉得200行左右就够了。”“那个，我知道，是官方的二次封装组件库，200行就够了？嗯，是的，等等，你说的代码里有操作按钮吗？”“操作按钮？你是说你头像上的【新建】【详情】按钮？”“是的。”“点进去会怎么样？长这样，你又没给我看！”“哦，看起来差不多是这样。”“哦~看起来是这样的，那这个就简单了，不就是个弹窗吗，再加100行吧。”“那【删除】呢？”“就是这样。10行就可以了。”“哈哈，不用担心，还有批量删除！”》哦，这个不算太难，大部分都是表格内置的Api，删除刷新表格请求后就结束了，无非就是记录选项而已，我觉得再给个10行就差不多了.不过我看到你勾选这个之后，页面底部有个横条，把【批量删除】按钮放在那里挺有意思的，不过也不是太难，我觉得加上about就差不多了20行。”“哈哈，对，我算了算，差不多有340行。”“是啊，如果你写这么一个页面，这个代码量是正常的。”“如果翻页后还保留上一页的选项怎么办？”组件，你觉得不麻烦，但我不不要觉得太麻烦，也没有必要，爱谁就做什么。”“知道怎么做就说吧！”“你这是故意找茬吧？再说也不难，antd的table不是有preserveSelectedRowKeys属性吗？我觉得可以用那个来实现，或者监听table的selection事件，保存一个变量。如果不行，就把页面单独删掉，也不麻烦。”话虽这么说，确实没有必要，但我觉得这样更好。如果要删除多个，每次删除总是要点击几次，删除后数据就没了。然后是第二页。数据会排到第一页，我担心会不会删错了。”“没关系，只要你不觉得累，你就写吧。我觉得没什么大不了的。如果你真的想做，就用那个api，最多加20行。”“哦！对了，我忘了说，你把鼠标悬停在这个数字上，就能看到选项。”“……你玩的还不错，数据都在，设置个Popover就可以了。“”是的，如果你算一下，它几乎是400行代码。“嗯，你的需求很多，差不多吧。”“哈哈，这个页面我一共花了134行代码，你觉得可行吗”？？？你是怎么做到的，给我看看。”查看表格的示例代码“我看了一下，有意思，这个组件用了一个Bigjson，把配置传进去对不对？这种封装很常见。”“是的，你看，这是其中一个碎片。对于表格顶部的查询，只需要指定search:true即可。"{title:'英文名',key:'en'search:true}"像这样，我看到上面有个占位符，怎么没看到你传入。”“哦，那个是自动生成的，像这里，会生成”请输入英文名称“。”“那你要自定义怎么办？”“当然可以，你要这么写。"{title:'英文名',key:'en'search:{placeholder:'请输入英文名'}}"哦~这也可以是对象，万一呢一个选择框？”“也很简单，只需添加选项并输入：'选择'。”{title:'Profession',key:'class',type:'select',options:[{label:'GuardOperator',value:'1'},{label:'SniperOperator',value:'2'},{label:'WarlockReload',value:'3'},{label:'医疗操作员',value:'4'},{label:'ReloadOperator',value:'5'},{label:'辅助运算符',value:'6'},{label:'特殊运算符',value:'7'},{label:'先锋歌剧tor',value:'8'}],search:true}"为什么你的选项和类型没有放在搜索对象中？""哈哈，你不知道，因为如果你这样写，表格也可以使用这个配置。如果写在搜索对象里，就只能查询区自己用了。”“表也可以用这个配置？这两个表有什么用。""表格的这一列可以通过选项进行翻译。如果数据为1，则此列将根据选项搜索标签。此时对应的标签为GuardOperator，所以页面显示GuardOperator。另外，如果表格有过滤，加上filter:true，就会出现过滤。”“是的，挺方便的，type呢？我不能使用这个表格。”“是的，这实际上是用于对话框弹出编辑。这样，也可以在弹出窗口中显示一个选择框。”{title:'Profession',key:'class',type:'select',options:[{label:'GuardOperator',value:'1'},{label:'SniperOperator',value:'2'},{label:'SorcererReload',value:'3'},{label:'MedicalOperator',value:'4'},{label:'ReloadOperator',value:'5'},{标签:'AuxiliaryOperator',value:'6'},{label:'SpecialOperator',value:'7'},{label:'PioneerOperator',value:'8'}],search:true,+dialog:true}"哦！明白了，指定dialog:true后，会显示在弹窗里对吧？""是的，如果只显示在弹窗里，不显示在窗体里呢？""可以这样做。指定table:false就可以了。”{title:'Profession',key:'class',type:'select',options:[{label:'GuardOperator',value:'1'},{label:'SniperOperator',value:'2'},{label:'SorcererReload',value:'3'},{label:'MedicalOperator',value:'4'},{label:'ReloadOperator',value:'5'},{标签:'辅助运算符',value:'6'},{label:'特殊运算符',value:'7'},{label:'先锋运算符',value:'8'}],dialog:true,+table:false}”明白了，这是弹窗、表格、查询的组合对吧？对了，我怎么没看到打开弹窗的新代码？需要更多的代码。”只需将addApi作为请求接口传入，然后指定action="add"?"Add"这样也可以吗？为什么？这么难吗，不用监听按钮点击事件，然后控制显示弹窗，然后请求接口，然后关闭弹窗刷新页面？""是的，这里假设弹窗和窗体默认共享同一个配置，大部分弹窗的添加方式都是一样的，所以封装了所有的操作，只剩下这个了.当然，如果太复杂，或者没有可以和表共享的列，那就再定义一个'fields:dialogFields'，它完全独立于表，使用两个字段，每个字段都有自己的字段。“哦，对了，那我明白了，修改也是一样的。””“是啊，编辑的时候，不会有默认值吧？此时，我们将记录作为表单的默认值传入。"constctrl:AyTableCtrlField={render:(value:string,record:Record)=>{return(Edit)}}"对对对！该组件将常用操作转化为指令。”“是的，如果你的详情需要申请接口，那你就不需要备案了。删掉后改成detailApi和detailParams，分别是请求的接口和请求的参数。action="view"命令会自动将请求返回的数据作为弹窗打开后表单的默认值。"details"明白了，太棒了！对了，你刚刚提到分页被删除了。使用这个组件是不是很简单？""是的，我给你看，这还有几个步骤，第一步是添加selectionType="checkbox"以启用检查；第二步，添加selectShowKey="cn"，让气泡浮动决定显示选中的名字，用tag包裹，因为tag可以去掉，所以翻页后，也可以点击上面的Xtag取消选项，不需要翻到上一页取消选择；第三步第一步为删除按钮添加action="delete"属性，批量删除添加action="batch-delete"属性，标签添加deleteApi={deleteApi}接口完成删除和批量删除操作。"constctrl:AyTableCtrlField={render:(value:string,record:Record)=>{return(delete)}}批量删除“哦，这样可以吗？那倒是挺方便的，毕竟不用写一堆代码自己写。对了，刚刚看了下代码，上面有个renderType:'html'，这个有什么作用。"{title:'description',key:'feature',width:200,renderType:'html'}"你猜怎么着？“”将此列呈现为html或其他内容？”“是的，另外还有unitdatetimestate等类型，你可以看看这个。“查看自定义类型”是可以的，但是如果我想要的不存在怎么办？”“就等着你问这个。看来你用过其他二次包装。该组件提供了两种方法。第一个可以指定渲染方法。”{title:'Name',key:'cn',search:true,dialog:{required:true},table:{//渲染自定义内容render:(text:string,record:Record)=>{return(

)}}},"secondtype可以全局注册，注册后可以像renderType:'star'一样使用。"import{registerTableRender,RenderProps}from'amiya'/***@decsregisterrenderType*@paramrenderTypeNamestring注册类型名*@paramtextstring当前列数据*@paramrecordobject当前行数据*@paramfieldcurrentConfiguration配置项**@returnsReactNode*/registerTableRender('renderTypeName',({text,record,field}:RenderProps)=>{return{text}})//实际上使用constfields=[{renderType:'renderTypeName'//registeredname}]注册一个自定义表单类型"嘿伙计，这和我直接渲染没什么区别，但是如果在其他publicp中使用注册方式写renderlaces，确实使当前页面更干净一些。”“是的，有两种方式可以选择。看看这个设置，你看，是不是省了很多代码，如果你用jsx语法糖，会省得更多，这样只需要90行代码。”“没错，我看到的其他二级包都没有这个，都是用json的。我用的时候，编辑器右边有一大片空白，代码太长了。我不开心。我喜欢你的写作方式，我给他们提建议，他们不听，还那么好控制。"{//...}"真的很省，没见过这么省的，不过这个组件封装了这么多，别人会用吗？你了解它的用途吗？”“的确，没有介绍，谁也看不懂。所以这个组件支持完整的TypeScripthints，并且还准备了文档，里面详细介绍了table的使用方法。可以看到左边那一堆菜单都是关于tableapi的。》另外还有完整的页面级示例，也可以作为参考。“其他实例表”我看到了，这是一个二次封装的组件库，我觉得还有其他组件，以后会用到体验一下。”“好的，等你的消息。》阿米娅二次包装文件地址