{"id":3858,"date":"2024-01-15T15:36:52","date_gmt":"2024-01-15T07:36:52","guid":{"rendered":"http:\/\/www.ponybai.com\/?p=3858"},"modified":"2023-12-02T15:53:42","modified_gmt":"2023-12-02T07:53:42","slug":"%e5%9c%a8%e8%a1%a8%e4%b8%ad%e6%98%be%e7%a4%ba%e8%ae%b0%e5%bd%95%e6%95%b0%e6%8d%ae","status":"publish","type":"post","link":"http:\/\/www.ponybai.com\/?p=3858","title":{"rendered":"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e"},"content":{"rendered":"\n

\u82e5\u8981\u663e\u793a\u8bb0\u5f55\u6570\u636e\u7684\u884c\u548c\u5217\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002\u82e5\u8981\u5728\u5177\u6709\u7ed3\u6784\u5c42\u6b21\u7ed3\u6784\u7684\u8868\u4e2d\u663e\u793a\u6570\u636e\uff0c\u4f8b\u5982\u5ba2\u6237\u8bb0\u5f55\u548c\u5173\u8054\u7684\u8054\u7cfb\u4eba\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002lightning-datatable<\/code>lightning-tree-grid<\/code><\/p>\n\n\n\n

\u6bd4\u8f83\u548c\u7528\u4e8e\u6570\u636e\u663e\u793alightning-datatable lightning-tree-grid<\/code><\/h2>\n\n\n\n

\u8fd9\u4e9b\u7ec4\u4ef6\u7c7b\u4f3c\uff0c\u4f46\u6709\u4e00\u4e2a V \u5f62\u6309\u94ae\uff0c\u7528\u4e8e\u5c55\u5f00\u548c\u6298\u53e0\u5177\u6709\u5b50\u8bb0\u5f55\u7684\u884c\u3002lightning-tree-grid<\/code><\/p>\n\n\n\n

lightning-datatable<\/code>\u4f7f\u7528 Salesforce Lightning Design System \uff08SLDS\uff09 \u4e2d\u7684\u6570\u636e\u8868\u84dd\u56fe\uff0c\u5e76\u63d0\u4f9b\u4e00\u79cd\u5728\u684c\u9762\u4e0a\u663e\u793a\u8bb0\u5f55\u6570\u636e\u7684\u7b80\u5355\u65b9\u6cd5\u3002<\/p>\n\n\n\n

lightning-tree-grid<\/code>\u4f7f\u7528 SLDS \u4e2d\u7684\u6811\u7f51\u683c\u84dd\u56fe\uff0c\u4f7f\u60a8\u80fd\u591f\u663e\u793a\u5206\u5c42\u6570\u636e\uff0c\u5c06\u8bb0\u5f55\u5206\u7ec4\u5230\u7236\u5b50\u5173\u7cfb\u4e2d\u3002<\/p>\n\n\n\n

\u63d0\u793a<\/p>\n\n\n\n

Lightning Design System \u6587\u6863\u63d0\u4f9b\u4e86\u6bcf\u4e2a\u7ec4\u4ef6\u5904\u4e8e\u4e0d\u540c\u72b6\u6001\u7684\u793a\u4f8b\u3002<\/p>\n\n\n\n

\u4ee5\u4e0b\u662f \u548c \u652f\u6301\u7684\u529f\u80fd\u5217\u8868\u3002lightning-datatable<\/code>lightning-tree-grid<\/code><\/p>\n\n\n\n

\u7279\u5f81<\/th>lightning-datatable<\/code><\/th>lightning-tree-grid<\/code><\/th><\/tr><\/thead>
\u6309\u6570\u636e\u7c7b\u578b\u8bbe\u7f6e\u5217\u683c\u5f0f<\/td>\"\u662f\u7684\"<\/td>\"\u662f\u7684\"<\/td><\/tr>
\u6807\u5934\u64cd\u4f5c<\/td>\"\u662f\u7684\"<\/td>\"\u662f\u7684\"<\/td><\/tr>
\u884c\u64cd\u4f5c<\/td>\"\u662f\u7684\"<\/td>\"\u662f\u7684\"<\/td><\/tr>
\u8c03\u6574\u5217\u5927\u5c0f<\/td>\"\u662f\u7684\"<\/td>\"\u662f\u7684\"<\/td><\/tr>
\u9009\u62e9\u884c<\/td>\"\u662f\u7684\"<\/td>\"\u662f\u7684\"<\/td><\/tr>
\u6362\u884c\u6216\u526a\u88c1\u5217\u5185\u5bb9<\/td>\"\u662f\u7684\"<\/td>\"\u662f\u7684\"<\/td><\/tr>
\u884c\u53f7<\/td>\"\u662f\u7684\"<\/td>\"\u662f\u7684\"<\/td><\/tr>
\u5217\u6392\u5e8f<\/td>\"\u662f\u7684\"<\/td>–<\/td><\/tr>
\u5185\u8054\u7f16\u8f91<\/td>\"\u662f\u7684\"<\/td>–<\/td><\/tr>
\u65e0\u9650\u6eda\u52a8<\/td>\"\u662f\u7684\"<\/td>–<\/td><\/tr>
\u53ef\u6269\u5c55\u884c<\/td>–<\/td>\"\u662f\u7684\"<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

\u6ce8\u610f<\/p>\n\n\n\n

lightning-datatable<\/code>\u5e76\u4e14\u4e0d\u53d7\u79fb\u52a8\u8bbe\u5907\u652f\u6301\u3002lightning-tree-grid<\/code><\/p>\n\n\n\n

\u4f7f\u7528\u5185\u8054\u7f16\u8f91\u5728\u8868\u683c\u4e2d\u663e\u793a\u6570\u636e<\/h2>\n\n\n\n

\u8981\u5728\u8868\u4e2d\u663e\u793a Salesforce \u6570\u636e\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002\u8be5\u7ec4\u4ef6\u652f\u6301\u5185\u8054\u7f16\u8f91\uff0c\u4f7f\u7528\u6237\u65e0\u9700\u5bfc\u822a\u5230\u8bb0\u5f55\u5373\u53ef\u66f4\u65b0\u5b57\u6bb5\u503c\u3002lightning-datatable<\/code><\/p>\n\n\n\n

\u82e5\u8981\u52a0\u8f7d\u8bb0\u5f55\u5217\u8868\uff0c\u8bf7\u4f7f\u7528\u00a0getListUi\uff08\u5df2\u5f03\u7528\uff09<\/code>\u7ebf\u8def\u9002\u914d\u5668\u6216\u5728 Apex \u65b9\u6cd5\u4e2d\u4f7f\u7528 SOQL\u3002\u8bf7\u53c2\u9605\u6570\u636e\u6307\u5357\u3002<\/p>\n\n\n\n

\u6b64\u793a\u4f8b\u5728 Apex \u65b9\u6cd5\u4e2d\u4f7f\u7528 SOQL \u5728\u5ba2\u6237\u8bb0\u5f55\u4e2d\u52a0\u8f7d\u8054\u7cfb\u4eba\u3002<\/p>\n\n\n\n

public with sharing class ContactController {\n\n    @AuraEnabled(cacheable=true)\n    public static List<Contact> getContacts(String accId) {\n        return [\n            SELECT AccountId, Id, FirstName, LastName, Title, Phone, Email\n            FROM Contact\n            WHERE AccountId = :accId\n            WITH SECURITY_ENFORCED\n        ];\n    }\n}<\/code><\/pre>\n\n\n\n
\u6ce8\u91ca\u5c06\u65b9\u6cd5\u516c\u5f00\u7ed9 Lightning \u7ec4\u4ef6\uff0c\u5e76\u5728\u5ba2\u6237\u7aef\u4e0a\u7f13\u5b58\u8054\u7cfb\u4eba\u5217\u8868\u3002\u8be5\u53c2\u6570\u7b5b\u9009\u7ed9\u5b9a\u5ba2\u6237\u8bb0\u5f55\u7684\u8054\u7cfb\u4eba\u3002@AuraEnabled(cacheable=true)<\/code>accId<\/code><\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\u5982\u679c Apex \u65b9\u6cd5\u8fd4\u56de\u6570\u636e\uff0c\u5219 HTML \u6a21\u677f\u5c06\u663e\u793a\u5177\u6709\u53ef\u7f16\u8f91\u540d\u5b57\u548c\u59d3\u6c0f\u5b57\u6bb5 \uff081\uff09 \u7684\u7ec4\u4ef6\u3002\u7f16\u8f91\u5b57\u6bb5\u65f6\uff0c\u5c06\u663e\u793a\u201c\u4fdd\u5b58<\/strong>\u201d\u6309\u94ae\uff0c\u60a8\u53ef\u4ee5\u5355\u51fb\u8be5\u6309\u94ae\u4ee5\u66f4\u65b0\u8054\u7cfb\u4eba\u8bb0\u5f55\u3002\u6210\u529f\u66f4\u65b0\u8054\u7cfb\u4eba\u8bb0\u5f55\u8fd8\u4f1a\u66f4\u65b0\u76f8\u5173\u5217\u8868\u00a0\uff082\uff09 \u4e2d\u7684\u8bb0\u5f55\u6570\u636e\uff0c\u4ee5\u53ca\u9875\u9762\u4e0a\u7531 Lightning \u6570\u636e\u670d\u52a1\u7ba1\u7406\u7684\u5176\u4ed6\u7ec4\u4ef6\u3002lightning-datatable<\/code><\/p>\n\n\n\n
\u5b9e\u73b0\u5185\u8054\u7f16\u8f91<\/h2>\n\n\n\n
\u63d0\u793a<\/p>\n\n\n\n
\u6b64\u793a\u4f8b\u57fa\u4e8e\u00a0lwc-recipes\u00a0\u5b58\u50a8\u5e93\u4e2d\u7684\u7ec4\u4ef6\u3002\u6b64\u7248\u672c\u7565\u6709\u4e0d\u540c\uff0c\u4ee5\u4fbf\u80fd\u591f\u5728\u8bb0\u5f55\u9875\u9762\u4e0a\u4f7f\u7528\u6570\u636e\u8868\u3002datatableInlineEditWithUiApi<\/code><\/p>\n\n\n\n
\u82e5\u8981\u542f\u7528\u5185\u8054\u7f16\u8f91\uff0c\u8bf7\u6309\u4ee5\u4e0b\u6a21\u677f\u6240\u793a\u914d\u7f6e\u7ec4\u4ef6\u3002lightning-datatable<\/code>apexContactsForAccount<\/code><\/p>\n\n\n\n
<!-- apexContactsForAccount.html -->\n<template>\n  <lightning-card title=\"Datatable Example\" icon-name=\"custom:custom63\">\n    <div class=\"slds-m-around_medium\">\n      <template lwc:if={contacts.data}>\n        <lightning-datatable\n          key-field=\"Id\"\n          data={contacts.data}\n          columns={columns}\n          onsave={handleSave}\n          draft-values={draftValues}\n        >\n        <\/lightning-datatable>\n      <\/template>\n      <template lwc:if={contacts.error}>\n        <!-- Handle Apex error -->\n      <\/template>\n    <\/div>\n  <\/lightning-card>\n<\/template><\/code><\/pre>\n\n\n\n
required \u5c5e\u6027\u5c06\u6bcf\u4e00\u884c\u4e0e\u8054\u7cfb\u4eba\u8bb0\u5f55\u76f8\u5173\u8054\u3002\u8be5\u5c5e\u6027\u4fdd\u5b58\u901a\u8fc7\u7ebf\u8def\u670d\u52a1\u4ece Apex \u65b9\u6cd5\u6216\u7ebf\u8def\u9002\u914d\u5668\u68c0\u7d22\u7684\u6570\u636e\u3002\u8be5\u5c5e\u6027\u4e3a\u6bcf\u5217\u5206\u914d\u4e00\u4e2a\u8bb0\u5f55\u5b57\u6bb5\uff0c\u5e76\u81ea\u5b9a\u4e49\u5217\u7684\u884c\u4e3a\u3002\u5f53\u7528\u6237\u7f16\u8f91\u5355\u5143\u683c\u65f6\uff0c\u66f4\u65b0\u540e\u7684\u503c\u5c06\u5b58\u50a8\u5728 \u4e2d\u3002key-field<\/code>data<\/code>columns<\/code>draft-values<\/code><\/p>\n\n\n\n
\u5355\u51fb\u201c\u4fdd\u5b58<\/strong>\u201d\u6309\u94ae\u5c06\u89e6\u53d1\u8be5\u4e8b\u4ef6\u3002\u4f7f\u7528\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u5c06\u66f4\u6539\u4fdd\u7559\u5728\u6570\u636e\u8868\u4e2d\u3002\u5728\u6b64\u793a\u4f8b\u4e2d\uff0c\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u8c03\u7528\u00a0updateRecord\uff08recordInput\uff0c clientOptions\uff09<\/code>\u00a0\u6765\u4fdd\u5b58\u8bb0\u5f55\u66f4\u6539\u3002saveonsaveonsave<\/code><\/p>\n\n\n\n
\u6ce8\u610f<\/p>\n\n\n\n
\u6709\u5173\u5c5e\u6027\u548c\u652f\u6301\u7684\u529f\u80fd\u7684\u5217\u8868\uff0c\u8bf7\u53c2\u9605\u00a0lightning-datatable<\/code>\u3002<\/p>\n\n\n\n
\u5728\u5217\u4e2d\u542f\u7528\u5185\u8054\u7f16\u8f91<\/h2>\n\n\n\n
\u4e00\u884c\u6570\u636e\u5bf9\u5e94\u4e8e\u4e00\u6761\u8bb0\u5f55\uff0c\u6bcf\u5217\u663e\u793a\u8be5\u8bb0\u5f55\u7684\u5176\u4e2d\u4e00\u4e2a\u5b57\u6bb5\u7684\u503c\u3002\u82e5\u8981\u542f\u7528\u5185\u8054\u7f16\u8f91\uff0c\u8bf7\u901a\u8fc7\u5728\u5217\u5b9a\u4e49\u4e2d\u8bbe\u7f6e\u6765\u6307\u5b9a\u53ef\u7f16\u8f91\u7684\u5b57\u6bb5\u3002\u5728\u6b64\u793a\u4f8b\u4e2d\uff0c\u201c\u540d\u5b57\u201d\u548c\u201c\u59d3\u6c0f\u201d\u5b57\u6bb5\u662f\u53ef\u7f16\u8f91\u7684\u3002\u7531\u4e8e\u8054\u7cfb\u4eba\u7684\u201c\u59d3\u540d\u201d\u5b57\u6bb5\u662f\u590d\u5408\u5b57\u6bb5\uff0c\u56e0\u6b64\u5fc5\u987b\u5206\u522b\u4f7f\u7528\u201c\u540d\u5b57\u201d\u548c\u201c\u59d3\u6c0f\u201d\u5b57\u6bb5\u3002editable: true<\/code><\/p>\n\n\n\n
\/\/ apexContactsForAccount.js\n\nimport { LightningElement, wire, api } from \"lwc\";\nimport getContacts from \"@salesforce\/apex\/ContactController.getContactList\";\nimport { refreshApex } from \"@salesforce\/apex\";\nimport { updateRecord } from \"lightning\/uiRecordApi\";\n\nimport { ShowToastEvent } from \"lightning\/platformShowToastEvent\";\nimport FIRSTNAME_FIELD from \"@salesforce\/schema\/Contact.FirstName\";\nimport LASTNAME_FIELD from \"@salesforce\/schema\/Contact.LastName\";\nimport TITLE_FIELD from \"@salesforce\/schema\/Contact.Title\";\nimport PHONE_FIELD from \"@salesforce\/schema\/Contact.Phone\";\nimport EMAIL_FIELD from \"@salesforce\/schema\/Contact.Email\";\nimport ID_FIELD from \"@salesforce\/schema\/Contact.Id\";\n\nconst COLS = [\n  {\n    label: \"First Name\",\n    fieldName: FIRSTNAME_FIELD.fieldApiName,\n    editable: true,\n  },\n  {\n    label: \"Last Name\",\n    fieldName: LASTNAME_FIELD.fieldApiName,\n    editable: true,\n  },\n  { label: \"Title\", fieldName: TITLE_FIELD.fieldApiName, editable: true },\n  {\n    label: \"Phone\",\n    fieldName: PHONE_FIELD.fieldApiName,\n    type: \"phone\",\n    editable: true,\n  },\n  {\n    label: \"Email\",\n    fieldName: EMAIL_FIELD.fieldApiName,\n    type: \"email\",\n    editable: true,\n  },\n];\nexport default class DatatableInlineEditWithUiApi extends LightningElement {\n  @api recordId;\n  columns = COLS;\n  draftValues = [];\n\n  @wire(getContacts, { accId: \"$recordId\" })\n  contacts;\n\n  async handleSave(event) {\n    \/\/ Convert datatable draft values into record objects\n    const records = event.detail.draftValues.slice().map((draftValue) => {\n      const fields = Object.assign({}, draftValue);\n      return { fields };\n    });\n\n    \/\/ Clear all datatable draft values\n    this.draftValues = [];\n\n    try {\n      \/\/ Update all records in parallel thanks to the UI API\n      const recordUpdatePromises = records.map((record) => updateRecord(record));\n      await Promise.all(recordUpdatePromises);\n\n      \/\/ Report success with a toast\n      this.dispatchEvent(\n        new ShowToastEvent({\n          title: \"Success\",\n          message: \"Contacts updated\",\n          variant: \"success\",\n        }),\n      );\n\n      \/\/ Display fresh data in the datatable\n      await refreshApex(this.contacts);\n    } catch (error) {\n      this.dispatchEvent(\n        new ShowToastEvent({\n          title: \"Error updating or reloading contacts\",\n          message: error.body.message,\n          variant: \"error\",\n        }),\n      );\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
@wire(getContacts)<\/code>\u5c06\u6570\u636e\u63d0\u4f9b\u7ed9 \uff0c\u5e76\u5c06\u8bb0\u5f55 ID \u63d0\u4f9b\u7ed9 \u3002contacts.data<\/code>accId<\/code><\/p>\n\n\n\n
\u7f16\u8f91\u5b57\u6bb5\u65f6\uff0c\u5c06\u7f16\u8f91\u7684\u5b57\u6bb5\u503c\u548c\u8bb0\u5f55\u5b58\u50a8\u4e3a\u5bf9\u8c61\u6570\u7ec4\u3002event.detail.draftValues<\/code>Id<\/code><\/p>\n\n\n\n
[\n  {\n    FirstName: \"Sean\",\n    Id: \"003R0000002J2wHIAS\",\n  },\n  {\n    FirstName: \"Jack\",\n    Id: \"003R0000002J2wIIAS\",\n  },\n];<\/code><\/pre>\n\n\n\n
\u5728\u8fdb\u884c\u66f4\u6539\u540e\u6309 Tab \u952e\u6216\u5355\u51fb\u5355\u5143\u683c\u5916\u90e8\u65f6\uff0c\u5c06\u663e\u793a\u6570\u636e\u8868\u9875\u811a\uff0c\u5176\u4e2d\u5305\u542b\u201c\u53d6\u6d88<\/strong>\u201d\u548c\u201c\u4fdd\u5b58<\/strong>\u201d\u6309\u94ae\u3002\u82e5\u8981\u9690\u85cf\u6570\u636e\u8868\u9875\u811a\uff0c\u8bf7\u6e05\u9664\u8be5\u5c5e\u6027\u3002\u5c06\u503c\u590d\u5236\u5230\u8bb0\u5f55\u5bf9\u8c61\u4e2d\u540e\uff0c\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u5c06\u6e05\u9664\u3002draftValues<\/code>onsave<\/code>draftValues<\/code><\/p>\n\n\n\n
\u8c03\u7528\u00a0updateRecord\uff08recordInput\uff0c clientOptions\uff09<\/code>\u00a0\u5c06\u65b0\u5b57\u6bb5\u503c\u4fdd\u5b58\u5230\u8bb0\u5f55\u4e2d\u3002<\/p>\n\n\n\n
updateRecord()<\/code>\u53ea\u9700\u8981\u4e00\u6761\u8bb0\u5f55\u3002\u4e3a\u8981\u66f4\u65b0\u5176\u5b57\u6bb5\u7684\u6bcf\u6761\u8bb0\u5f55\u4f20\u5165\u4e00\u4e2a\u5bf9\u8c61\u3002\u5728\u6b64\u793a\u4f8b\u4e2d\uff0c\u8be5\u53c2\u6570\u5305\u542b\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8be5\u5bf9\u8c61\u5177\u6709\u591a\u4e2a\u8bb0\u5f55\u7684\u66f4\u65b0\u5b57\u6bb5\u3002\u82e5\u8981\u540c\u65f6\u66f4\u65b0\u591a\u6761\u8bb0\u5f55\uff0c\u8bf7\u5c06\u53c2\u6570\u4f20\u9012\u7ed9 \u8fdb\u884c\u5904\u7406\u3002recordInput<\/code>record<\/code>updateRecord()<\/code><\/p>\n\n\n\n
\u6210\u529f\u4fdd\u5b58\u540e\uff0c\u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u5c06\u8c03\u5ea6\u4e8b\u4ef6\u4ee5\u663e\u793a\u6210\u529f Toast \u6d88\u606f\u3002onsave<\/code>ShowToastEvent<\/code><\/p>\n\n\n\n
\u66f4\u65b0\u8bb0\u5f55\u540e\uff0c\u5237\u65b0 Apex \u65b9\u6cd5\u4e2d\u7684\u8054\u7cfb\u4eba\u5217\u8868\uff0c\u4ee5\u4fbf\u6570\u636e\u8868\u59cb\u7ec8\u663e\u793a\u6700\u65b0\u6570\u636e\u3002refreshApex(this.contacts)<\/code><\/p>\n\n\n\n
\u6ce8\u610f<\/p>\n\n\n\n
\u5bf9\u4e8e\u5355\u4e2a\u4e8b\u52a1\u4e2d\u7684\u6279\u91cf\u8bb0\u5f55\u66f4\u65b0\uff0c\u6211\u4eec\u5efa\u8bae\u4f7f\u7528 Apex\u3002\u8bf7\u53c2\u9605\u4f7f\u7528 Apex \u542f\u7528\u5185\u8054\u7f16\u8f91<\/strong>\u90e8\u5206\u3002<\/p>\n\n\n\n
\u4f7f\u7528 Apex \u542f\u7528\u5185\u8054\u7f16\u8f91<\/h2>\n\n\n\n
\u5bf9\u4e8e\u6279\u91cf\u8bb0\u5f55\u66f4\u65b0\uff0c\u8bf7\u5c06\u8bb0\u5f55\u66f4\u6539\u4f20\u9012\u7ed9\u8c03\u7528\u6570\u636e\u64cd\u4f5c\u8bed\u8a00 \uff08DML\uff09 \u64cd\u4f5c\u7684 Apex \u63a7\u5236\u5668\u3002\u5728\u6b64\u793a\u4f8b\u4e2d\uff0c\u7f16\u8f91\u540e\u7684\u5b57\u6bb5\u503c\u5c06\u4f20\u9012\u5230 Apex \u63a7\u5236\u5668\u3002\u7531\u4e8e\u8bb0\u5f55\u662f\u7531 Apex \u66f4\u65b0\u7684\uff0c\u56e0\u6b64\u60a8\u5fc5\u987b\u4f7f\u7528\u00a0notifyRecordUpdateAvailable\uff08recordIds\uff09<\/code>\u00a0\u51fd\u6570\u901a\u77e5 Lightning \u6570\u636e\u670d\u52a1 \uff08LDS\uff09\uff0c\u4ee5\u4fbf\u5237\u65b0 Lightning \u6570\u636e\u670d\u52a1\u7f13\u5b58\u548c\u7ebf\u8def\u3002updateupdateContacts<\/code><\/p>\n\n\n\n
\u6ce8\u610f<\/p>\n\n\n\n
\u6b64\u793a\u4f8b\u57fa\u4e8e\u00a0github.com\/trailheadapps\/lwc-recipes\u00a0\u5b58\u50a8\u5e93\u4e2d\u7684\u7ec4\u4ef6\u3002\u6b64\u7248\u672c\u7565\u6709\u4e0d\u540c\uff0c\u4f7f\u7528\u4e0d\u5e26 LDS \u7684 Apex\u3002datatableInlineEditWithApex<\/code><\/p>\n\n\n\n
\u5728\u4e0a\u4e00\u793a\u4f8b\u4e2d\u521b\u5efa\u7684\u6587\u4ef6\u4e2d\uff0c\u5bfc\u5165 Apex \u63a7\u5236\u5668\u548c\u51fd\u6570\u3002apexContactsForAccount.js<\/code>notifyRecordUpdateAvailable<\/code><\/p>\n\n\n\n
import updateContacts from \"@salesforce\/apex\/ContactController.updateContacts\";\nimport { notifyRecordUpdateAvailable } from \"lightning\/uiRecordApi\";<\/code><\/pre>\n\n\n\n
\u66f4\u65b0\u51fd\u6570\u4ee5\u5904\u7406\u7f16\u8f91\u7684\u503c\u3002\u82e5\u8981\u786e\u4fdd\u5728\u901a\u8fc7 Apex \u66f4\u65b0\u8bb0\u5f55\u540e\u8c03\u7528\u8be5\u8bb0\u5f55\uff0c\u8bf7\u4f7f\u7528 \/ \u6a21\u5f0f\u6216 Promise \u94fe\u3002\u6b64\u793a\u4f8b\u4f7f\u7528 \/\u3002handleSave()<\/code>notifyRecordUpdateAvailable()<\/code>async<\/code>await<\/code>async<\/code>await<\/code><\/p>\n\n\n\n
async handleSave(event) {\n    const updatedFields = event.detail.draftValues;\n\n    \/\/ Prepare the record IDs for notifyRecordUpdateAvailable()\n    const notifyChangeIds = updatedFields.map(row => { return { \"recordId\": row.Id } });\n\n    try {\n        \/\/ Pass edited fields to the updateContacts Apex controller\n        const result = await updateContacts({data: updatedFields});\n        console.log(JSON.stringify(\"Apex update result: \"+ result));\n        this.dispatchEvent(\n            new ShowToastEvent({\n                title: 'Success',\n                message: 'Contact updated',\n                variant: 'success'\n            })\n        );\n\n        \/\/ Refresh LDS cache and wires\n        notifyRecordUpdateAvailable(notifyChangeIds);\n\n        \/\/ Display fresh data in the datatable\n        await refreshApex(this.contacts);\n            \/\/ Clear all draft values in the datatable\n            this.draftValues = [];\n        }\n   } catch(error) {\n           this.dispatchEvent(\n               new ShowToastEvent({\n                   title: 'Error updating or refreshing records',\n                   message: error.body.message,\n                   variant: 'error'\n               })\n         );\n    };\n}<\/code><\/pre>\n\n\n\n
Apex \u63a7\u5236\u5668\u5c06\u5305\u542b\u66f4\u65b0\u5b57\u6bb5\u7684 JSON \u5b57\u7b26\u4e32\u53cd\u5e8f\u5217\u5316\u4e3a Contact \u5bf9\u8c61\u3002\u5b83\u4f7f\u7528 DML \u64cd\u4f5c\u66f4\u65b0\u5df2\u66f4\u6539\u7684\u8bb0\u5f55\u3002updateContacts<\/code>update<\/code><\/p>\n\n\n\n
@AuraEnabled\npublic static string updateContacts(Object data) {\n    List<Contact> contactsForUpdate = (List<Contact>) JSON.deserialize(\n         JSON.serialize(data),\n         List<Contact>.class\n    );\n    try {\n        update contactsForUpdate;\n        return 'Success: contacts updated successfully';\n    }\n    catch (Exception e) {\n        return 'The following exception has occurred: ' + e.getMessage();\n    }\n}\n\n\u521b\u5efa\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\r\n\u7ec4\u4ef6\u6839\u636e\u60a8\u4e3a\u5217\u6307\u5b9a\u7684\u7c7b\u578b\u8bbe\u7f6e\u6570\u636e\u683c\u5f0f\u3002lightning-datatable\r\n\r\n\u5728\u521b\u5efa\u81ea\u5df1\u7684\u6570\u636e\u7c7b\u578b\u4e4b\u524d\uff0c\u8bf7\u68c0\u67e5\u6807\u51c6\u6570\u636e\u7c7b\u578b\uff0c\u770b\u770b\u662f\u5426\u6ee1\u8db3\u60a8\u7684\u8981\u6c42\u3002\u53ef\u4ee5\u4f7f\u7528\u7c7b\u578b\u5c5e\u6027\u81ea\u5b9a\u4e49\u591a\u79cd\u7c7b\u578b\u7684\u8f93\u51fa\u3002\u6807\u51c6\u6570\u636e\u7c7b\u578b\u5305\u62ec\uff1a\r\n\r\naction\r\nboolean\r\nbutton\r\nbutton-icon\r\ncurrency\r\ndate\r\ndate-local\r\nemail\r\nlocation\r\nnumber\r\npercent\r\nphone\r\ntext\uff08\u9ed8\u8ba4\uff09\r\nurl\r\n\u6709\u5173\u6807\u51c6\u6570\u636e\u7c7b\u578b\u53ca\u5176\u7c7b\u578b\u5c5e\u6027\u7684\u66f4\u591a\u4fe1\u606f\uff0c\u8bf7\u53c2\u9605 lightning-datatable \u53c2\u8003\u6587\u6863\u3002\r\n\r\n\u6b64\u5916\uff0c\u5728\u521b\u5efa\u81ea\u5df1\u7684\u6570\u636e\u7c7b\u578b\u4e4b\u524d\uff0c\u8bf7\u8003\u8651 SLDS \u6837\u5f0f\u6302\u94a9\u3002SLDS \u6837\u5f0f\u94a9\u5b50\u53ef\u5e2e\u52a9\u60a8\u5728\u5f71\u5b50 DOM \u4e2d\u81ea\u5b9a\u4e49\u652f\u6301\u7684\u6570\u636e\u7c7b\u578b\u3002\u4f8b\u5982\uff0c\u53ef\u4ee5\u4f7f\u7528 SLDS \u6837\u5f0f\u6302\u94a9\u5728\u6570\u636e\u7c7b\u578b\u4e0a\u5e94\u7528\u4e0d\u540c\u7684\u989c\u8272\u3002button\r\n\r\n\u6ce8\u610f\r\n\r\n\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u4e0d\u652f\u6301\u8c03\u5ea6\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002\r\n\r\n\u901a\u8fc7\u6269\u5c55 LightningDatatable \u5b9a\u4e49\u81ea\u5b9a\u4e49\u7c7b\u578b\r\n\r\n\u521b\u5efa\u81ea\u5df1\u7684\u6570\u636e\u7c7b\u578b\u6765\u5b9e\u73b0\u81ea\u5b9a\u4e49\u5355\u5143\u683c\uff0c\u4f8b\u5982\u5220\u9664\u884c\u6309\u94ae\u6216\u56fe\u50cf\uff0c\u751a\u81f3\u662f\u81ea\u5b9a\u4e49\u6587\u672c\u6216\u6570\u5b57\u663e\u793a\u3002\u8fd8\u53ef\u4ee5\u4e3a\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u4e0a\u7684\u6bcf\u4e00\u884c\u5e94\u7528\u81ea\u5b9a\u4e49\u7c7b\u3002\r\n\r\n\u82e5\u8981\u5b9a\u4e49\u548c\u4f7f\u7528\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\uff0c\u8bf7\u5728\u65b0\u7ec4\u4ef6\u4e2d\u6269\u5c55\u7ec4\u4ef6\u7684\u7c7b\u3002LightningDatatablelightning-datatable\r\n\r\n\u6ce8\u610f\r\n\r\n\u60a8\u53ef\u4ee5\u4ece only \u6269\u5c55\u5230\u521b\u5efa\u5177\u6709\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u7684\u6570\u636e\u8868\u3002\u5728\u6240\u6709\u5176\u4ed6\u60c5\u51b5\u4e0b\uff0c\u4e0d\u652f\u6301\u6269\u5c55\u9664\u521b\u5efa Lightning Web \u7ec4\u4ef6\u4e4b\u5916\u7684\u4efb\u4f55\u7c7b\u3002LightningDatatableLightningElement\r\n\r\n\u521b\u5efa\u4e00\u4e2a Lightning Web \u7ec4\u4ef6\uff0c\u5e76\u5728\u7ec4\u4ef6\u6587\u4ef6\u5939\u7684 HTML \u6a21\u677f\u4e2d\u5b9a\u4e49\u60a8\u7684\u7c7b\u578b\u3002\u8be5\u6a21\u677f\u53ef\u4ee5\u5305\u542b\u4e0d\u9700\u8981 JavaScript \u7684\u7b80\u5355\u6570\u636e\u7c7b\u578b\u7684\u5b8c\u6574 UI\u3002\u8be5\u6a21\u677f\u8fd8\u53ef\u4ee5\u5d4c\u5165\u60a8\u5728\u53e6\u4e00\u4e2a\u6587\u4ef6\u5939\u4e2d\u5b9a\u4e49\u7684\u7ec4\u4ef6\u3002\u4f8b\u5982\uff0c\u5982\u679c\u8981\u5305\u542b\u786e\u5b9a\u8981\u663e\u793a\u7684\u5185\u5bb9\u7684\u903b\u8f91\uff0c\u8bf7\u4f7f\u7528\u5355\u72ec\u7684\u7ec4\u4ef6\u3002\r\n\r\n\u8ba9\u6211\u4eec\u770b\u4e00\u4e0b\u7ec4\u4ef6\u7684\u6587\u4ef6\u5939\u7ed3\u6784\uff0c\u5b83\u5b9a\u4e49\u4e86\u4e24\u79cd\u81ea\u5b9a\u4e49\u7c7b\u578b\u3002myCustomTypeDatatable\r\n\r\nmyCustomTypeDatatable\r\n   \u251c\u2500\u2500customName.html\r\n   \u251c\u2500\u2500customNumber.html\r\n   \u251c\u2500\u2500myCustomTypeDatatable.js\r\n   \u2514\u2500\u2500myCustomTypeDatatable.js-meta.xml\r\n\u5728 JavaScript \u6587\u4ef6\u4e2d\uff0c\u6269\u5c55\u7c7b\u5e76\u6307\u5b9a\u7c7b\u578b\u7684\u540d\u79f0\u548c\u6a21\u677f\u6587\u4ef6\u3002\u6b64\u793a\u4f8b\u4f7f\u7528 \u548c \u6a21\u677f\u521b\u5efa\u81ea\u5b9a\u4e49\u540d\u79f0\u7c7b\u578b\u548c\u81ea\u5b9a\u4e49\u6570\u5b57\u7c7b\u578b\u3002myCustomTypeDatatable.jsLightningDatatablecustomName.htmlcustomNumber.html\r\n\r\n\u6ce8\u610f\r\n\r\n\u7c7b\u578b\u548c\u6a21\u677f\u7684\u540d\u79f0\u4e0d\u5fc5\u5339\u914d\u3002\u8be5\u793a\u4f8b\u540c\u65f6\u4f7f\u7528\u7c7b\u578b\u540d\u79f0\u548c\u6a21\u677f\u6587\u4ef6\u540d\u3002\u6211\u4eec\u5efa\u8bae\u60a8\u5bfc\u5165\u5177\u6709\u4e0d\u540c\u540d\u79f0\u7684\u6a21\u677f\uff0c\u4ee5\u4fbf\u660e\u786e\u6307\u5b9a\u7c7b\u578b\u540d\u79f0\u548c\u6a21\u677f\u540d\u79f0\u7684\u4f4d\u7f6e\u3002customName\r\n\r\n\/\/myCustomTypeDatatable.js\r\nimport LightningDatatable from \"lightning\/datatable\";\r\nimport customNameTemplate from \".\/customName.html\";\r\nimport customNumberTemplate from \".\/customNumber.html\";\r\n\r\nexport default class MyCustomTypeDatatable extends LightningDatatable {\r\n  static customTypes = {\r\n    customName: {\r\n      template: customNameTemplate,\r\n      standardCellLayout: true,\r\n      typeAttributes: [\"accountName\"],\r\n    },\r\n    customNumber: {\r\n      template: customNumberTemplate,\r\n      standardCellLayout: false,\r\n      typeAttributes: [\"status\"],\r\n    },\r\n    \/\/ Other types here\r\n  };\r\n}\r\n\u6ce8\u610f\r\n\r\n\u60a8\u53ef\u4ee5\u4ece only \u6269\u5c55\u5230\u521b\u5efa\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u3002LightningDatatable\r\n\r\n\u5c06\u4ee5\u4e0b\u5c5e\u6027\u4f20\u9012\u7ed9\u5bf9\u8c61\u3002customTypes\r\n\r\n\u81ea\u5b9a\u4e49\u7c7b\u578b\u5c5e\u6027\t\u7c7b\u578b\t\u63cf\u8ff0\r\ntemplate\t\u5b57\u7b26\u4e32\t\u952e\u5165\u7684\u5bfc\u5165 HTML \u6a21\u677f\u7684\u540d\u79f0\u3002\r\ntypeAttributes\t\u6570\u7ec4\t\u8981\u4f20\u9012\u7ed9\u81ea\u5b9a\u4e49\u6570\u636e\u6a21\u677f\u7684\u5c5e\u6027\u7684\u9017\u53f7\u5206\u9694\u5217\u8868\u3002\u4f7f\u7528\u8bed\u6cd5\u8bbf\u95ee\u6570\u636e\u3002typeAttributes.attributeName\r\nstandardCellLayout\t\u5e03\u5c14\t\u6307\u5b9a\u662f\u5426\u4f7f\u7528\u6807\u51c6\u5e03\u5c40\u3002\u9ed8\u8ba4\u503c\u4e3a false\u3002\u6240\u6709\u6807\u51c6\u6570\u636e\u7c7b\u578b\u90fd\u4f7f\u7528\u6807\u51c6\u5e03\u5c40\u3002\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u7684\u9ed8\u8ba4\u5e03\u5c40\u662f\u88f8\u5e03\u5c40\u3002\u8bf7\u53c2\u9605\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u5e03\u5c40\u548c\u6837\u5f0f\u3002\u60a8\u53ef\u4ee5\u4f7f\u7528\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u7684\u5355\u5143\u683c\u6837\u5f0f\uff0c\u4f7f\u5176\u770b\u8d77\u6765\u4e0e\u6807\u51c6\u6570\u636e\u7c7b\u578b\u76f8\u4f3c\u3002\u8fd8\u652f\u6301\u8f85\u52a9\u529f\u80fd\u548c\u952e\u76d8\u5bfc\u822a\u3002standardCellLayoutstandardCellLayout\r\n\u521b\u5efa\u81ea\u5b9a\u4e49\u6570\u636e\u6a21\u677f\r\n\r\n\u5728\u81ea\u5b9a\u4e49\u6570\u636e\u6a21\u677f\u4e2d\uff0c\u6dfb\u52a0\u6570\u636e\u7c7b\u578b\u7684\u6807\u8bb0\u3002\u6b64\u793a\u4f8b\u521b\u5efa\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7c7b\u578b\uff0c\u8be5\u7c7b\u578b\u4f7f\u7528\u7ec4\u4ef6\u5448\u73b0\u6587\u672c\u6807\u7b7e\u3002customName.htmllightning-badge\r\n\r\n<!--customName.html-->\r\n<template>\r\n  <lightning-badge label={typeAttributes.accountName} icon-name=\"standard:account\">\r\n  <\/lightning-badge>\r\n<\/template>\r\n\u8be5\u6a21\u677f\u4f7f\u7528\u9ed8\u8ba4\u7684\u88f8\u5e03\u5c40\uff0c\u56e0\u4e3a \u8bbe\u7f6e\u4e3a .\u60a8\u53ef\u4ee5\u6dfb\u52a0\u81ea\u5df1\u7684\u6837\u5f0f\u3002\u4ee5\u4e0b\u793a\u4f8b\u5728\u5355\u5143\u683c\u5468\u56f4\u6dfb\u52a0\u4e00\u4e2a\u5c0f\u586b\u5145\uff0c\u5e76\u5c06\u6570\u5b57\u6d6e\u52a8\u5230\u53f3\u4fa7\u3002\u5982\u679c\u6570\u5b57\u4e0e\u6570\u636e\u5b9a\u4e49\u4e2d\u6307\u5b9a\u7684\u6761\u4ef6\u5339\u914d\uff0c\u5219\u4f1a\u663e\u793a\u4e00\u4e2a\u56fe\u6807\u3002customNumber.htmlmyCustomTypeDatatable.jsstandardCellLayout: falsecustomNumber\r\n\r\n<!--customNumber.html-->\r\n<template>\r\n  <div class=\"slds-p-around_x-small\">\r\n    <lightning-formatted-number\r\n      value={value}\r\n      class=\"slds-float_right\"\r\n    ><\/lightning-formatted-number>\r\n    <lightning-icon\r\n      icon-name={typeAttributes.status}\r\n      alternative-text=\"Employer Status\"\r\n    ><\/lightning-icon>\r\n  <\/div>\r\n<\/template>\r\n\u63d0\u793a\r\n\r\n\u8fd9\u4e9b\u793a\u4f8b\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u5f88\u7b80\u5355\uff0c\u53ea\u80fd\u7528 HTML \u8868\u793a\u3002\u5982\u679c\u81ea\u5b9a\u4e49\u7c7b\u578b\u66f4\u590d\u6742\uff0c\u8bf7\u4f7f\u7528 JavaScript\u3001HTML \u6a21\u677f\u548c XML \u914d\u7f6e\u6587\u4ef6\u521b\u5efa\u5355\u72ec\u7684\u7ec4\u4ef6\u3002\u4f7f\u7528\u81ea\u5b9a\u4e49\u6570\u636e HTML \u6a21\u677f\u4f5c\u4e3a\u7ec4\u4ef6\u7684\u5bb9\u5668\u3002\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u7684\u7f16\u8f91\u6a21\u677f\u793a\u4f8b\u4e2d\u4f7f\u7528\u4e86\u4e00\u4e2a\u5355\u72ec\u7684\u7ec4\u4ef6\u3002\r\n\r\n\u4f7f\u7528\u81ea\u5b9a\u4e49\u7c7b\u578b\u5b9e\u73b0\u6570\u636e\u8868\r\n\r\n\u8ba9\u6211\u4eec\u5b9e\u73b0\u4e00\u4e2a\u4f7f\u7528\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u6570\u636e\u8868\u3002\u7b2c\u4e00\u5217\u4f7f\u7528\u6211\u4eec\u5728\u4e0a\u4e00\u8282\u4e2d\u521b\u5efa\u7684\u81ea\u5b9a\u4e49\u7c7b\u578b\u663e\u793a\u5e10\u6237\u540d\u79f0\u3002\u8be5\u5c5e\u6027\u4e0e\u5e10\u6237\u5bf9\u8c61\u4e0a\u7684\u5b57\u6bb5\u5339\u914d\u3002fieldNameName\r\n\r\n\u4f7f\u7528\u81ea\u5b9a\u4e49\u7c7b\u578b\u8bb0\u5f55\u6570\u636e\u8868\u4e2d\u663e\u793a\u7684\u6570\u636e\r\n\r\n\u4f7f\u7528 Apex \u63a7\u5236\u5668\u5728\u6570\u636e\u8868\u4e2d\u663e\u793a 10 \u6761\u5e10\u6237\u8bb0\u5f55\u3002\r\n\r\npublic with sharing class AccountController {\r\n    @AuraEnabled(cacheable=true)\r\n    public static List<Account> getAccountList() {\r\n        return [SELECT Id, Name, Industry, NumberOfEmployees FROM Account WITH SECURITY_ENFORCED LIMIT 10];\r\n    }\r\n}\r\n\u8981\u5b9e\u73b0\u81ea\u5b9a\u4e49\u7c7b\u578b datatable\uff0c\u8bf7\u521b\u5efa\u4e00\u4e2a\u5305\u88c5\u7ec4\u4ef6\u4ee5\u5305\u542b\u6269\u5c55\u7684 datatable \u7ec4\u4ef6\uff0c\u5b9a\u4e49\u6570\u636e\u8868\u7684\u5217\uff0c\u7136\u540e\u83b7\u53d6\u6570\u636e\u3002\u8fd9\u91cc\u6211\u4eec\u7528\u4f5c\u5305\u88c5\u5668\u3002myDatatable\r\n\r\n\u5b9a\u4e49\u5217\u65f6\uff0c\u53ef\u4ee5\u4f7f\u7528\u8be5\u5c5e\u6027\u4f20\u5165 SLDS \u5b9e\u7528\u7a0b\u5e8f\u7c7b\u6216\u60a8\u81ea\u5df1\u7684\u7c7b\u3002cellAttributes\r\n\r\n\/* myDatatable.js *\/\r\nimport { LightningElement, wire, track } from \"lwc\";\r\nimport getAccountList from \"@salesforce\/apex\/AccountController.getAccountList\";\r\n\r\nconst COLS = [\r\n  {\r\n    label: \"Account Name\",\r\n    type: \"customName\",\r\n    typeAttributes: {\r\n      accountName: { fieldName: \"Name\" },\r\n    },\r\n  },\r\n  {\r\n    label: \"Industry\",\r\n    fieldName: \"Industry\",\r\n    cellAttributes: {\r\n      class: { fieldName: \"industryColor\" },\r\n    },\r\n  },\r\n  {\r\n    label: \"Employees\",\r\n    type: \"customNumber\",\r\n    fieldName: \"NumberOfEmployees\",\r\n    typeAttributes: {\r\n      status: { fieldName: \"status\" },\r\n    },\r\n    cellAttributes: {\r\n      class: \"slds-theme_alert-texture\",\r\n    },\r\n  },\r\n];\r\n\r\nexport default class MyDatatable extends LightningElement {\r\n  columns = COLS;\r\n  @track accounts = [];\r\n\r\n  @wire(getAccountList)\r\n  wiredAccounts({ error, data }) {\r\n    if (error) {\r\n      \/\/ Handle error\r\n    } else if (data) {\r\n      \/\/ Process record data\r\n      this.accounts = data.map((record) => {\r\n        let industryColor = record.Industry === \"Energy\" ? \"slds-text-color_success\" : \"\";\r\n        let status = record.NumberOfEmployees > 10000 ? \"utility:ribbon\" : \"\";\r\n        return { ...record, industryColor: industryColor, status: status };\r\n      });\r\n    }\r\n  }\r\n}\r\nmyDatatable.js\u6f14\u793a\u4e86\u5728\u81ea\u5b9a\u4e49\u5355\u5143\u683c\u4e0a\u5e94\u7528\u6837\u5f0f\u7684\u51e0\u79cd\u65b9\u6cd5\u3002\u4ec5\u5f53\u5b57\u6bb5\u503c\u5339\u914d\u65f6\uff0c\u8be5\u5217\u624d\u4f7f\u7528\u8be5\u7c7b\u3002\u8be5\u5217\u5728\u8be5\u5217\u7684\u6240\u6709\u884c\u4e0a\u4f7f\u7528\u8be5\u7c7b\u3002\u6b64\u5916\uff0c\u7528\u4e8e\u5217\u7684\u7c7b\u578b\u5305\u62ec\u76f4\u63a5\u5728\u6807\u8bb0\u4e2d\u5b9e\u73b0\u7684\u5e03\u5c40\u548c\u586b\u5145\u7c7b\u3002Industryslds-text-color_successEnergyNumberOfEmployeesslds-theme_alert-texturecustomNumberNumberOfEmployeescustomNumber.html\r\n\r\n\u63a5\u4e0b\u6765\uff0c\u5c06 Apex \u63a7\u5236\u5668\u8fd4\u56de\u7684\u6570\u636e\u4f20\u9012\u7ed9\u81ea\u5b9a\u4e49\u7c7b\u578b datatable \u7ec4\u4ef6\u4e2d\u7684\u5c5e\u6027\u3002getAccountListdata\r\n\r\n<!--myDatatable.html-->\r\n<template>\r\n  <c-my-custom-type-datatable\r\n    key-field=\"Id\"\r\n    data={accounts}\r\n    columns={columns}\r\n    show-row-number-column\r\n  >\r\n  <\/c-my-custom-type-datatable>\r\n<\/template>\r\n\u63d0\u793a\r\n\r\nlwc-recipes \u5b58\u50a8\u5e93\u4e2d\u7684\u7ec4\u4ef6\u4e3a \u521b\u5efa\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u3002datatableCustomDataTypelightning-datatable<\/code><\/pre>\n\n\n\n
\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u5e03\u5c40\u548c\u6837\u5f0f<\/h2>\n\n\n\n
\u60a8\u53ef\u4ee5\u81ea\u5b9a\u4e49\u4f7f\u7528\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u7684\u5355\u5143\u683c\u7684\u5916\u89c2\u3002lightning-datatable<\/code><\/p>\n\n\n\n
\u4f7f\u7528\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u7684\u5e03\u5c40<\/h2>\n\n\n\n
\u81ea\u5b9a\u4e49\u5355\u5143\u683c\u53ef\u4ee5\u4f7f\u7528\u6807\u51c6\u5e03\u5c40\u6216\u88f8\u5e03\u5c40\u3002<\/p>\n\n\n\n
\u6807\u51c6\u5e03\u5c40\uff1a<\/p>\n\n\n\n
    \n
  • \u5c06\u5185\u5bb9\u5747\u5300\u5730\u5206\u5e03\u5728\u5355\u5143\u683c\u4e2d\uff0c\u7b2c\u4e00\u4e2a\u9879\u76ee\u4e0e\u5de6\u8fb9\u6846\u9f50\u5e73\uff0c\u6700\u540e\u4e00\u4e2a\u9879\u76ee\u4e0e\u53f3\u8fb9\u6846\u9f50\u5e73<\/li>\n\n\n\n
  • \u5c06\u6587\u672c\u5411\u5de6\u5bf9\u9f50\uff0c\u5782\u76f4\u5411\u4e2d\u5bf9\u9f50<\/li>\n\n\n\n
  • \u5728\u5185\u5bb9\u7684\u5de6\u4fa7\u548c\u53f3\u4fa7\u6dfb\u52a0\u4e00\u4e2a\u5c0f\u586b\u5145<\/li>\n\n\n\n
  • \u652f\u6301\u53ef\u7f16\u8f91\u7c7b\u578b\u7684\u8f85\u52a9\u529f\u80fd\u548c\u952e\u76d8\u5bfc\u822a<\/li>\n<\/ul>\n\n\n\n
    \u88f8\u5e03\u5c40\uff0c\u8fd9\u662f\u81ea\u5b9a\u4e49\u5355\u5143\u683c\u7684\u9ed8\u8ba4\u5e03\u5c40\uff1a<\/p>\n\n\n\n
      \n
    • \u5c06\u6587\u672c\u5411\u5de6\u5bf9\u9f50\uff0c\u5782\u76f4\u5411\u4e2d\u5bf9\u9f50<\/li>\n\n\n\n
    • \u5220\u9664\u5185\u5bb9\u5de6\u4fa7\u548c\u53f3\u4fa7\u7684\u586b\u5145<\/li>\n\n\n\n
    • \u4e0d\u652f\u6301\u53ef\u7f16\u8f91\u7c7b\u578b\u7684\u8f85\u52a9\u529f\u80fd\u548c\u952e\u76d8\u5bfc\u822a<\/li>\n<\/ul>\n\n\n\n
      \u6240\u6709\u652f\u6301\u7684\u6807\u51c6\u6570\u636e\u7c7b\u578b\u90fd\u4f7f\u7528\u6807\u51c6\u5e03\u5c40\u3002lightning-datatable<\/code><\/p>\n\n\n\n
      \u82e5\u8981\u4f7f\u7528\u6807\u51c6\u5e03\u5c40\uff0c\u8bf7\u6307\u5b9a\u5b9a\u4e49\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u65f6\u95f4\u3002standardCellLayout: true<\/code><\/p>\n\n\n\n
      static customTypes = { customName: { template: customNameTemplate, standardCellLayout: true,\ntypeAttributes: ['accountName'], }, \/\/ Other types here }<\/code><\/pre>\n\n\n\n
      \u8bf7\u53c2\u9605\u521b\u5efa\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u3002<\/p>\n\n\n\n
      \u521b\u5efa\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u5e76\u4f7f\u7528\u9ed8\u8ba4\u88f8\u5e03\u5c40\u65f6\uff0c\u53ef\u4ee5\u5e94\u7528\u81ea\u5df1\u7684\u6837\u5f0f\u3001\u5bf9\u9f50\u5217\u4e2d\u7684\u5185\u5bb9\u3001\u914d\u7f6e\u6587\u672c\u6362\u884c\u548c\u526a\u8f91\u3002<\/p>\n\n\n\n
      \u5728\u5217\u4e0a\u5e94\u7528\u6837\u5f0f<\/h2>\n\n\n\n
      \u82e5\u8981\u5c06\u6837\u5f0f\u5e94\u7528\u4e8e\u5217\u4e2d\u7684\u6240\u6709\u884c\uff0c\u8bf7\u5728\u5217\u914d\u7f6e\u4e2d\u5c06 CSS \u7c7b\u4f20\u9012\u7ed9\u3002cellAttributes<\/code><\/p>\n\n\n\n
      const COLS = [\n  {\n    label: \"Employees\",\n    type: \"number\",\n    fieldName: \"NumberOfEmployees\",\n    cellAttributes: {\n      class: \"slds-theme_shade slds-theme_alert-texture\",\n    },\n  },\n];<\/code><\/pre>\n\n\n\n
      \u82e5\u8981\u5c06\u6837\u5f0f\u5e94\u7528\u4e8e\u7279\u5b9a\u884c\uff0c\u8bf7\u4f7f\u7528\u8be5\u5c5e\u6027\u5c06 CSS \u7c7b\u8fde\u63a5\u5230\u6570\u636e\u5b9a\u4e49\u3002\u6b64\u793a\u4f8b\u4f7f\u7528\u8be5\u5c5e\u6027\u5c06\u84dd\u8272\u6587\u672c\u5e94\u7528\u4e8e\u201c\u80fd\u6e90\u201d\u884c\u4e1a\u7684\u884c\u3002fieldName<\/code>fieldName<\/code>industryClass<\/code><\/p>\n\n\n\n
      \/* myDatatable.js *\/\nimport { LightningElement, wire, track } from 'lwc';\nimport getAccountList from '@salesforce\/apex\/AccountController.getAccountList';\n\nconst COLS = [{\n    label: 'Industry', fieldName: 'Industry',\n    cellAttributes: {\n        class: { fieldName: 'industryClass' },\n    }\n}, \/\/ Other columns here\n];\n\nexport default class MyDatatable extends LightningElement {\n    columns = COLS;\n    @track accounts = [];\n\n    @wire(getAccountList)\n    wiredAccounts({error, data}) {\n        if (error) {\n            \/\/ Handle error\n        } else if (data) {\n            \/\/ Process record data\n            this.accounts = data.map((record) => {\n                let industryClass = record.Industry === 'Energy' ? 'blueText': 'defaultText';\n                return {...record, 'industryClass: industryClass}\n            });\n\n        }\n    }<\/code><\/pre>\n\n\n\n
      \u5bf9\u9f50\u81ea\u5b9a\u4e49\u5355\u5143\u683c\u4e2d\u7684\u5185\u5bb9<\/h2>\n\n\n\n
      \u60a8\u53ef\u4ee5\u5bf9\u9f50\u4f7f\u7528\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u6807\u51c6\u5e03\u5c40\u7684\u5217\u4e2d\u7684\u5185\u5bb9\u3002\u5728\u5b9a\u4e49\u4e2d\uff0c\u4f20\u5165\u5c5e\u6027\u3002cellAttributes<\/code>alignment<\/code><\/p>\n\n\n\n
      const COLS = [\n  {\n    label: \"Account Name\",\n    type: \"customName\",\n    fieldName: \"Name\",\n    cellAttributes: {\n      alignment: \"right\",\n    },\n  },\n];<\/code><\/pre>\n\n\n\n
      \u652f\u6301\u7684\u503c\u4e3a \u3001 \u548c \u3002alignment<\/code>left<\/code>center<\/code>right<\/code><\/p>\n\n\n\n
      \u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u6807\u51c6\u6570\u5b57\u7c7b\u578b\u5411\u53f3\u5bf9\u9f50\u3002\u6807\u51c6\u6570\u5b57\u7c7b\u578b\u5305\u62ec \u3001 \u548c \u6570\u636e\u7c7b\u578b\u3002currency<\/code>number<\/code>percent<\/code><\/p>\n\n\n\n
      \u6587\u672c\u6362\u884c\u548c\u526a\u88c1<\/h2>\n\n\n\n
      \u521b\u5efa\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u65f6\uff0c\u8bf7\u4f7f\u7528 SLDS \u5b9e\u7528\u7a0b\u5e8f\u7c7b\u548c \u5b9e\u73b0\u6587\u672c\u6362\u884c\u548c\u526a\u88c1\u3002\u8fd9\u4e9b\u7c7b\u4f7f\u81ea\u5b9a\u4e49\u6570\u636e\u5355\u5143\u683c\u80fd\u591f\u5728\u7528\u6237\u66f4\u6539\u6570\u636e\u8868\u5217\u6807\u9898\u4e2d\u7684\u81ea\u52a8\u6362\u884c\u9009\u62e9\u65f6\u6b63\u786e\u663e\u793a\u3002\u6587\u672c\u6362\u884c\u4f1a\u5782\u76f4\u5c55\u5f00\u884c\u4ee5\u663e\u793a\u66f4\u591a\u5185\u5bb9\u3002\u6587\u672c\u526a\u88c1\u4f1a\u5c06\u5185\u5bb9\u622a\u65ad\u4e3a\u5217\u4e2d\u7684\u4e00\u884c\u3002slds-hyphenate<\/code>slds-truncate<\/code><\/p>\n\n\n\n
      \u5047\u8bbe\u60a8\u6709\u4e00\u4e2a\u663e\u793a\u5e10\u6237\u540d\u79f0\u7684\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u6a21\u677f\u3002\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u8be5\u5217\u663e\u793a\u7684\u6587\u672c\u88ab\u526a\u88c1\uff0c\u8fd9\u4f1a\u622a\u65ad\u5e26\u6709\u5c3e\u968f\u7701\u7565\u53f7\u7684\u5185\u5bb9\u3002<\/p>\n\n\n\n
      <template>\n  <template lwc:if={wrapText}>\n    <div class=\"slds-hyphenate\">{typeAttributes.accountName}<\/div>\n  <\/template>\n  <template lwc:else>\n    <div class=\"slds-truncate\">{typeAttributes.accountName}<\/div>\n  <\/template>\n<\/template><\/code><\/pre>\n\n\n\n
      \u60a8\u8fd8\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a getter\uff0c\u8be5 getter \u6839\u636e\u8be5\u503c\u8fd4\u56de SLDS \u5b9e\u7528\u7a0b\u5e8f\u7c7b\u3002wrapText<\/code><\/p>\n\n\n\n
      \u82e5\u8981\u663e\u793a\u6362\u884c\u6587\u672c\uff0c\u8bf7\u4ece\u5217\u6807\u9898\u7684\u4e0b\u62c9\u83dc\u5355\u4e2d\u9009\u62e9\u6362\u884c\u6587\u672c<\/strong>\u3002<\/p>\n\n\n\n
      \u6216\u8005\uff0c\u82e5\u8981\u5728\u52a0\u8f7d\u6570\u636e\u8868\u65f6\u5728\u5217\u4e0a\u663e\u793a\u6362\u884c\u6587\u672c\uff0c\u8bf7\u4f20\u5165\u5217\u5b9a\u4e49\u3002wrapText: true<\/code><\/p>\n\n\n\n
      const COLS = [\n  {\n    label: \"Account Name\",\n    type: \"customText\",\n    wrapText: true,\n    typeAttributes: {\n      accountName: { fieldName: \"Name\" },\n    },\n  },\n];<\/code><\/pre>\n\n\n\n
      \u60a8\u53ef\u4ee5\u63a7\u5236\u6362\u884c\u5217\u5185\u5bb9\u65f6\u663e\u793a\u7684\u884c\u6570\u3002\u5728\u6269\u5c55\u6570\u636e\u8868\u7ec4\u4ef6\u4e2d\u8bbe\u7f6e\uff0c\u4ee5\u5728\u9690\u85cf\u5176\u4f59\u884c\u4e4b\u524d\u663e\u793a\u591a\u884c\u3002\u6570\u636e\u8868\u5e94\u7528\u884c\u4f4d\u4ee5\u5141\u8bb8\u591a\u884c\u6587\u672c\u622a\u65ad\u3002wrap-text-max-lines<\/code><\/p>\n\n\n\n
      <template>\n  <c-my-custom-type-datatable\n    key-field=\"id\"\n    data={accounts}\n    columns={columns}\n    wrap-text-max-lines=\"2\"\n  >\n  <\/c-my-custom-type-datatable>\n<\/template><\/code><\/pre>\n\n\n\n
      \u6ce8\u610f<\/p>\n\n\n\n
      wrap-text-max-lines<\/code>Internet Explorer 11\u00a0\u4e0d\u652f\u6301\u3002\u5982\u679c\u4e3a true\uff0c\u5219\u663e\u793a\u5217\u4e2d\u7684\u6574\u4e2a\u6587\u672c\u3002wrapText<\/code><\/p>\n\n\n\n
      \u4f7f\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u53ef\u7f16\u8f91<\/h2>\n\n\n\n
      \u82e5\u8981\u4f7f\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u53ef\u5728 \u4e2d\u7f16\u8f91\uff0c\u8bf7\u521b\u5efa\u4e00\u4e2a\u9644\u52a0\u6a21\u677f\u6765\u5b9e\u73b0\u7528\u4e8e\u5185\u8054\u7f16\u8f91\u6570\u636e\u7c7b\u578b\u7684 UI\u3002lightning-datatable<\/code><\/p>\n\n\n\n
      \u8fd9\u4e9b\u9ad8\u7ea7\u6b65\u9aa4\u589e\u52a0\u4e86\u5185\u8054\u7f16\u8f91\u529f\u80fd\u3002<\/p>\n\n\n\n
        \n
      1. \u521b\u5efa\u7f16\u8f91\u6a21\u677f\u3002<\/li>\n\n\n\n
      2. \u5c06\u7f16\u8f91\u6a21\u677f\u6dfb\u52a0\u5230\u81ea\u5b9a\u4e49\u7c7b\u578b\u5b9a\u4e49\u4e2d\u3002<\/li>\n\n\n\n
      3. \u4f7f\u81ea\u5b9a\u4e49\u7c7b\u578b\u5728\u5217\u5b9a\u4e49\u4e2d\u53ef\u7f16\u8f91\u3002<\/li>\n<\/ol>\n\n\n\n
        \u8ba9\u6211\u4eec\u901a\u8fc7\u6269\u5c55 LightningDatatable \u5b9a\u4e49\u81ea\u5b9a\u4e49\u7c7b\u578b\u4e2d\u7684\u793a\u4f8b\u4e2d\u7684\u7c7b\u578b\u5b9e\u73b0\u5185\u8054\u7f16\u8f91\u3002customNumber<\/code><\/p>\n\n\n\n
        \u521b\u5efa\u7f16\u8f91\u6a21\u677f<\/h2>\n\n\n\n
        \u5728\u5b9a\u4e49\u81ea\u5b9a\u4e49\u7c7b\u578b\u6a21\u677f\u7684\u540c\u4e00\u6587\u4ef6\u5939\u4e2d\uff0c\u521b\u5efa\u7528\u4e8e\u7f16\u8f91\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u6a21\u677f\u3002customNumberEdit.html<\/code>customNumber.html<\/code><\/p>\n\n\n\n
        myCustomTypeDatatable\n   \u251c\u2500\u2500customName.html\n   \u251c\u2500\u2500customNumber.html\n   \u251c\u2500\u2500customNumberEdit.html\n   \u251c\u2500\u2500myCustomTypeDatatable.js\n   \u2514\u2500\u2500myCustomTypeDatatable.js-meta.xml<\/code><\/pre>\n\n\n\n
        \u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u7f16\u8f91\u6a21\u677f\u4f7f\u7528\u4e0e\u81ea\u5b9a\u4e49\u7c7b\u578b\u6a21\u677f\u4e2d\u7684\u8f93\u51fa\u7ec4\u4ef6\u5339\u914d\u7684\u8f93\u5165\u7ec4\u4ef6\u3002\u5efa\u8bae\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002\u5728\u793a\u4f8b\u4e2d\uff0c\u8f93\u51fa\u7ec4\u4ef6\u5728\u6a21\u677f\u4e2d\u4f7f\u7528\uff0c\u56e0\u6b64\u6211\u4eec\u5728\u5176\u7f16\u8f91\u6a21\u677f\u4e2d\u4f7f\u7528\u3002\u8be5\u7ec4\u4ef6\u4f7f\u7528\u6237\u80fd\u591f\u66f4\u6539\u81ea\u5b9a\u4e49\u7c7b\u578b\u5355\u5143\u683c\u4e2d\u7684\u6570\u5b57\u3002lightning-input<\/code>lightning-formatted-number<\/code>customNumber<\/code>lightning-input type=\"number\"<\/code>lightning-input type=\"number\"<\/code><\/p>\n\n\n\n
        \u63d0\u793a<\/p>\n\n\n\n
        \u6709\u5173\u53ef\u5728\u7f16\u8f91\u6a21\u677f\u4e2d\u4f7f\u7528\u7684\u7ec4\u4ef6\u7684\u4fe1\u606f\uff0c\u8bf7\u53c2\u9605\u672c\u9875\u540e\u9762\u7684\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u5185\u8054\u7f16\u8f91\u6ce8\u610f\u4e8b\u9879<\/strong>\u3002<\/p>\n\n\n\n
        <!--customNumberEdit.html-->\n<template>\n  <div class=\"slds-p-around_x-small\">\n    <lightning-input\n      type=\"number\"\n      value={editedValue}\n      required={required}\n      label={columnLabel}\n      min={typeAttributes.min}\n      data-inputable=\"true\"\n      class=\"slds-float_right\"\n    >\n    <\/lightning-input>\n  <\/div>\n<\/template><\/code><\/pre>\n\n\n\n
        \u4f7f\u7528\u8fd9\u4e9b\u5c5e\u6027\u5728\u8f93\u5165\u7ec4\u4ef6\u548c\u6269\u5c55\u6570\u636e\u8868\u7ec4\u4ef6\u4e4b\u95f4\u4f20\u9012\u503c\u3002<\/p>\n\n\n\n
        \u5c5e\u6027<\/th>\u7c7b\u578b<\/th>\u63cf\u8ff0<\/th><\/tr><\/thead>
        editedValue<\/code><\/td>\u5b57\u7b26\u4e32<\/td>\u6b63\u5728\u7f16\u8f91\u7684\u81ea\u5b9a\u4e49\u5355\u5143\u683c\u7684\u5f53\u524d\u503c\u3002<\/td><\/tr>
        columnLabel<\/code><\/td>\u5b57\u7b26\u4e32<\/td>\u4ece\u5217\u5b9a\u4e49\u4e2d\u68c0\u7d22\u5230\u7684\u503c\u3002label<\/code><\/td><\/tr>
        required<\/code><\/td>\u5e03\u5c14<\/td>\u4ece\u5217\u5b9a\u4e49\u4e2d\u68c0\u7d22\u5230\u7684\u5fc5\u9700\u503c\u3002\u9ed8\u8ba4\u503c\u4e3a false\u3002\u5982\u679c\u5217\u5b9a\u4e49\u8bbe\u7f6e\u4e3a true\uff0c\u5219\u5f53\u7528\u6237\u4e0e\u5b57\u6bb5\u4ea4\u4e92\u4e14\u672a\u8f93\u5165\u503c\u65f6\uff0c\u8be5\u5b57\u6bb5\u5c06\u663e\u793a\u9a8c\u8bc1\u9519\u8bef\u3002required<\/code><\/td><\/tr>
        typeAttributes<\/code><\/td>\u5bf9\u8c61<\/td>\u5305\u542b\u5355\u5143\u683c\u7684 type \u5c5e\u6027\u503c\u7684\u5bf9\u8c61\u3002\u4f7f\u7528\u8bed\u6cd5\u8bbf\u95ee\u503c\u3002typeAttributes.attributeName<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
        \u8be5\u793a\u4f8b\u8bbe\u7f6e\u8be5\u5c5e\u6027\uff0c\u4ee5\u786e\u4fdd\u7528\u6237\u5728\u5185\u8054\u7f16\u8f91\u81ea\u5b9a\u4e49\u6570\u5b57\u65f6\u8f93\u5165\u975e\u8d1f\u6570\u3002\u5728\u4e0b\u4e00\u8282\u4e2d\uff0c\u5c06\u6dfb\u52a0\u5230\u81ea\u5b9a\u4e49\u7c7b\u578b\u5b9a\u4e49\u4e2d\u3002min<\/code>min<\/code><\/p>\n\n\n\n
        \u8be5\u5c5e\u6027\u5bf9\u4e8e\u6807\u51c6\u5355\u5143\u683c\u5e03\u5c40\u4e2d\u7684\u8f85\u52a9\u529f\u80fd\u652f\u6301\u662f\u5fc5\u9700\u7684\u3002data-inputable=\"true\"<\/code><\/p>\n\n\n\n
        \u5c06\u7f16\u8f91\u6a21\u677f\u6dfb\u52a0\u5230\u81ea\u5b9a\u4e49\u7c7b\u578b\u5b9a\u4e49<\/h2>\n\n\n\n
        \u5bfc\u5165 \u4e2d\u7684\u7f16\u8f91\u6a21\u677f\uff0c\u5e76\u5728\u5bf9\u8c61\u7684\u5b9a\u4e49\u4e2d\u6dfb\u52a0\u5c5e\u6027\u3002\u8be5\u5c5e\u6027\u6307\u5b9a\u7528\u4e8e\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u5185\u8054\u7f16\u8f91\u7684\u6a21\u677f\u3002myCustomTypeDatatable.js<\/code>editTemplate: customNumberEditTemplate<\/code>customNumber<\/code>customTypes<\/code>editTemplate<\/code><\/p>\n\n\n\n
        \/\/myCustomTypeDatatable.js\nimport LightningDatatable from \"lightning\/datatable\";\nimport customNameTemplate from \".\/customName.html\";\nimport customNumberTemplate from \".\/customNumber.html\";\nimport customNumberEditTemplate from \".\/customNumberEdit.html\";\n\nexport default class MyCustomTypeDatatable extends LightningDatatable {\n  static customTypes = {\n    customName: {\n      template: customNameTemplate,\n      standardCellLayout: true,\n      typeAttributes: [\"accountName\"],\n    },\n    customNumber: {\n      template: customNumberTemplate,\n      editTemplate: customNumberEditTemplate,\n      standardCellLayout: true,\n      typeAttributes: [\"status\", \"min\"],\n    },\n    \/\/ Other types here\n  };\n}<\/code><\/pre>\n\n\n\n
        \u5c06\u503c\u66f4\u6539\u4e3a true \u4ee5\u652f\u6301\u8f85\u52a9\u529f\u80fd\u548c\u952e\u76d8\u5bfc\u822a\u3002\u6709\u5173\u8be6\u7ec6\u4fe1\u606f\uff0c\u8bf7\u53c2\u9605\u672c\u9875\u540e\u9762\u7684\u53ef\u7f16\u8f91\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u8f85\u52a9\u529f\u80fd<\/strong>\u3002standardCellLayout<\/code><\/p>\n\n\n\n
        \u5728\u7c7b\u578b\u5b9a\u4e49\u4e2d\u6dfb\u52a0\u5c5e\u6027\u3002min<\/code>typeAttributes<\/code><\/p>\n\n\n\n
        \u4f7f\u81ea\u5b9a\u4e49\u7c7b\u578b\u5728\u5217\u5b9a\u4e49\u4e2d\u53ef\u7f16\u8f91<\/h2>\n\n\n\n
        \u5728\u6570\u636e\u8868\u7684\u5217\u5b9a\u4e49\u4e2d\uff0c\u5c06\u5c5e\u6027\u6dfb\u52a0\u5230\u81ea\u5b9a\u4e49\u7c7b\u578b\u3002editable: true<\/code><\/p>\n\n\n\n
        \u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u5c55\u793a\u4e86\u521b\u5efa\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u4e2d\u7684\u4f7f\u7528\u81ea\u5b9a\u4e49\u7c7b\u578b\u5b9e\u73b0\u6570\u636e\u8868<\/strong>\u7684\u793a\u4f8b\uff0c\u8be5\u6570\u636e\u7c7b\u578b\u5c06\u5c5e\u6027\u5e94\u7528\u4e8e Employees \u5217\uff0c\u8be5\u5217\u4f7f\u7528 type .myDatatable.jseditable: truecustomNumber<\/code><\/p>\n\n\n\n
        \/* myDatatable.js *\/\nimport { LightningElement, wire, track } from 'lwc';\nimport getAccountList from '@salesforce\/apex\/AccountController.getAccountList';\n\nconst COLS = [\n    { label: 'Account Name', type: 'customName',\n     typeAttributes: {\n        accountName: { fieldName: 'Name' }\n    },\n    },\n    { label: 'Industry', fieldName: 'Industry',\n     cellAttributes: {\n        class: {fieldName: 'industryColor'},\n    }\n    },\n    { label: 'Employees', type: 'customNumber', fieldName: 'NumberOfEmployees', editable: true,\n     typeAttributes: {\n            status: {fieldName: 'status'},\n            min: 0\n    },\n    cellAttributes: {\n        class: 'slds-theme_alert-texture'\n    }\n}];<\/code><\/pre>\n\n\n\n
        \u5982\u679c\u5728\u7f16\u8f91\u6a21\u677f\u4e2d\u5411\u8f93\u5165\u7ec4\u4ef6\u6dfb\u52a0\u5c5e\u6027\uff0c\u8bf7\u5c06\u5b83\u4eec\u4e5f\u6dfb\u52a0\u5230\u5217\u5b9a\u4e49\u4e2d\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u4e3a Employees \u5217\u6dfb\u52a0\u4e86\u5c5e\u6027\u3002min<\/code>typeAttributes<\/code><\/p>\n\n\n\n
        \u5904\u7406\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u66f4\u6539\u503c<\/h2>\n\n\n\n
        \u4e0e\u6807\u51c6\u6570\u636e\u7c7b\u578b\u4e00\u6837\uff0c\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u7f16\u8f91\u5b57\u6bb5\u4ee5\u9ec4\u8272\u7a81\u51fa\u663e\u793a\u663e\u793a\u3002\u5355\u5143\u683c\u7684\u66f4\u6539\u503c\u4e34\u65f6\u5b58\u50a8\u5728\u5c5e\u6027\u4e2d\u3002editedValue<\/code><\/p>\n\n\n\n
        \u4f7f\u7528 action \u548c attribute \u4fdd\u7559\u6570\u636e\u8868\u4e2d\u66f4\u6539\u7684\u503c\uff0c\u5c31\u50cf\u5bf9\u6807\u51c6\u7c7b\u578b\u6240\u505a\u7684\u90a3\u6837\u3002\u8bf7\u53c2\u9605\u00a0lightning-datatable<\/code>\u00a0\u53c2\u8003\u6587\u6863\u4e2d\u7684\u4f7f\u7528\u5185\u8054\u7f16\u8f91\u5728\u8868\u4e2d\u663e\u793a\u6570\u636e\u548c\u4f7f\u7528\u5185\u8054\u7f16\u8f91<\/strong>\u90e8\u5206\u3002onsavedraft-values<\/code><\/p>\n\n\n\n
        \u53ef\u7f16\u8f91\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u8f85\u52a9\u529f\u80fd<\/h2>\n\n\n\n
        \u8981\u652f\u6301\u8f85\u52a9\u529f\u80fd\uff0c\u4f8b\u5982\u53ef\u7f16\u8f91\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u7684\u952e\u76d8\u5bfc\u822a\uff0c\u8bf7\u6267\u884c\u4ee5\u4e0b\u64cd\u4f5c\uff1a<\/p>\n\n\n\n
          \n
        • \u5c06\u5c5e\u6027\u6dfb\u52a0\u5230\u7f16\u8f91\u6a21\u677f\u4e2d\u7684\u8f93\u5165\u7ec4\u4ef6\u3002data-inputable=\"true\"<\/code><\/li>\n\n\n\n
        • \u4e3a \u4e2d\u7684\u81ea\u5b9a\u4e49\u7c7b\u578b\u5b9a\u4e49\u8bbe\u7f6e\u3002standardCellLayout: true<\/code>customTypes<\/code><\/li>\n<\/ul>\n\n\n\n
          \u8fd9\u4e9b\u5c5e\u6027\u4f7f\u6570\u636e\u8868\u7684\u64cd\u4f5c\u6a21\u5f0f\u548c\u5bfc\u822a\u6a21\u5f0f\u80fd\u591f\u5904\u7406\u60a8\u7684\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u3002\u901a\u8fc7\u5728\u663e\u793a\u53ef\u7f16\u8f91\u7684\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u7684\u5355\u5143\u683c\u4e0a\u6309 Enter \u952e\u6216\u7a7a\u683c\u952e\u8fdb\u5165\u64cd\u4f5c\u6a21\u5f0f\u3002\u5728\u5bfc\u822a\u6a21\u5f0f\u4e0b\uff0c\u5f53\u60a8\u5728\u6570\u636e\u8868\u4e2d\u6309 Tab \u952e\u65f6\uff0c\u60a8\u53ef\u4ee5\u5bfc\u822a\u5230\u663e\u793a\u53ef\u7f16\u8f91\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u7684\u5355\u5143\u683c\uff0c\u56e0\u4e3a\u5b83\u4eec\u662f\u53ef\u64cd\u4f5c\u7684\u3002<\/p>\n\n\n\n
          \u8be5\u5c5e\u6027\u4f7f\u7528\u8be5\u5c5e\u6027\u7684\u503c\u5e94\u7528\u4e8e\u8f93\u5165\u7ec4\u4ef6\u3002aria-label<\/code>label<\/code><\/p>\n\n\n\n
          \u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u5df2\u7f16\u8f91\u5355\u5143\u683c\u7684\u9a8c\u8bc1\u548c\u9519\u8bef\u5904\u7406<\/h2>\n\n\n\n
          \u8be5\u7ec4\u4ef6\u4e3a\u60a8\u5904\u7406\u57fa\u672c\u7684\u5ba2\u6237\u7aef\u8f93\u5165\u9a8c\u8bc1\u3002\u4f8b\u5982\uff0c\u5982\u679c\u4e3a\u6570\u5b57\u8f93\u5165\u6307\u5b9a \u3001 \u6216\u5c5e\u6027\uff0c\u5219\u7ec4\u4ef6\u4f1a\u6839\u636e\u8fd9\u4e9b\u5c5e\u6027\u503c\u9a8c\u8bc1\u8f93\u5165\uff0c\u5982\u679c\u8f93\u5165\u65e0\u6548\uff0c\u5219\u8fd4\u56de\u9519\u8bef\u3002\u8fd8\u53ef\u4ee5\u5bf9\u81ea\u5b9a\u4e49\u7c7b\u578b\u6267\u884c\u66f4\u590d\u6742\u7684\u5ba2\u6237\u7aef\u9a8c\u8bc1\u3002lightning-input<\/code>step<\/code>min<\/code>max<\/code><\/p>\n\n\n\n
          \u82e5\u8981\u5728\u5ba2\u6237\u7aef\u4e0a\u8fdb\u4e00\u6b65\u9a8c\u8bc1\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u7528\u6237\u8f93\u5165\uff0c\u8bf7\u5728\u81ea\u5b9a\u4e49\u7f16\u8f91\u6a21\u677f\u4e2d\u4f7f\u7528\u5b50\u7ec4\u4ef6\u3002<\/p>\n\n\n\n
          \u5728\u8f93\u5165\u7ec4\u4ef6\u4e0a\u8bbe\u7f6e\uff0c\u5e76\u5728\u5176 JS \u4e2d\u5305\u542b getter\uff0c\u4ee5\u516c\u5f00\u8f93\u5165\u7ec4\u4ef6\u7684\u6709\u6548\u6027 API\u3002data-inputable=\"true\"<\/code>validity()<\/code><\/p>\n\n\n\n
          @api\nget validity() {\n    return this.customInput.validity;\n}<\/code><\/pre>\n\n\n\n
          \u5728\u7f16\u8f91\u6a21\u677f\u4e2d\u516c\u5f00\u8f93\u5165\u7ec4\u4ef6\u4e2d\u7684\u65b9\u6cd5\uff0c\u4ee5\u4fbf\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u53ef\u4ee5\u5728\u66f4\u6539\u7684\u6570\u636e\u65e0\u6548\u65f6\u663e\u793a\u81ea\u5b9a\u4e49\u6d88\u606f\u3002showHelpMessageifInvalid()<\/code><\/p>\n\n\n\n
          @api\nshowHelpMessageIfInvalid() {\n    this.customInput.showHelpMessageIfInvalid()\n}<\/code><\/pre>\n\n\n\n
          \u6709\u5173\u8be6\u7ec6\u4fe1\u606f\uff0c\u8bf7\u53c2\u9605\u00a0lightning-input<\/code>\u00a0\u7684\u53c2\u8003\u6587\u6863\u3002<\/p>\n\n\n\n
          \u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u5185\u8054\u7f16\u8f91\u6ce8\u610f\u4e8b\u9879<\/h2>\n\n\n\n
            \n
          • \u5728\u81ea\u5b9a\u4e49\u7f16\u8f91\u6a21\u677f\u4e2d\uff0c\u4ec5\u652f\u6301\u5c06\u5177\u6709\u5355\u4e2a\u8f93\u5165\u5b57\u6bb5\u7684 Lightning \u57fa\u672c\u7ec4\u4ef6\u4f5c\u4e3a\u8f93\u5165\u7ec4\u4ef6\u3002\u8fd8\u652f\u6301\u5177\u6709\u591a\u4e2a\u8f93\u5165\u7684\u7ec4\u4ef6\uff0c\u5176 API \u8ba1\u7b97\u7ed3\u679c\u4e3a\u5355\u4e2a\u8f93\u5165\u3002lightning-input type=\"datetime\"<\/code><\/li>\n\n\n\n
          • \u8be5\u7ec4\u4ef6\u4ec5\u8bbe\u8ba1\u7528\u4e8e\u6570\u636e\u8868\uff0c\u4e0d\u652f\u6301\u5728\u6570\u636e\u8868\u4e2d\u4f7f\u7528\u3002\u8bf7\u6539\u7528\u3002lightning-input-field<\/code>lightning-record-edit-form<\/code>lightning-input<\/code><\/li>\n\n\n\n
          • \u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u5c1a\u4e0d\u652f\u6301\u670d\u52a1\u5668\u7aef\u9a8c\u8bc1\u89c4\u5219\u3002<\/li>\n<\/ul>\n\n\n\n
            \u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u7684\u7f16\u8f91\u6a21\u677f\u793a\u4f8b<\/h2>\n\n\n\n
            \u6b64\u793a\u4f8b\u663e\u793a\u4e86\u4e00\u4e2a\u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\uff0c\u5176\u6a21\u677f\u5305\u542b\u7ec4\u4ef6\u800c\u4e0d\u662f\u7b80\u5355\u7684\u6807\u8bb0\u3002<\/p>\n\n\n\n
            \u6ce8\u610f<\/p>\n\n\n\n
            lwc-recipes\u00a0\u5b58\u50a8\u5e93\u5177\u6709\u591a\u4e2a\u7ec4\u4ef6\uff0c\u7528\u4e8e\u6f14\u793a\u4f7f\u7528 Apex \u548c\u6a21\u5757\u8fdb\u884c\u5185\u8054\u7f16\u8f91\u3002\u67e5\u627e\u540d\u79f0\u4ee5 \u5f00\u5934\u7684\u7ec4\u4ef6\u3002lightning\/uiRecordApidatatableInline<\/code><\/p>\n\n\n\n
            \u6b64\u793a\u4f8b\u521b\u5efa\u4e00\u4e2a\u5177\u6709 Amount \u81ea\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u7684\u6570\u636e\u8868\u3002<\/p>\n\n\n\n
            \u8fd9\u662f\u521d\u59cb\u52a0\u8f7d\u65f6\u7684\u6570\u636e\u8868\u3002<\/p>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            \u8be5\u7ec4\u4ef6\u5305\u542b\u5b9a\u4e49\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u6269\u5c55\u6570\u636e\u8868\u7ec4\u4ef6\u3002myDatatableWrapper<\/code><\/p>\n\n\n\n
            \/* myDatatableWrapper.html *\/\n\n<template>\n  <c-my-custom-type-datatable columns={COLS} key-field=\"id\" data={data}>\n  <\/c-my-custom-type-datatable>\n<\/template><\/code><\/pre>\n\n\n\n
            \/\/ myDatatableWrapper.js\n\nimport { LightningElement } from 'lwc';\nexport default class MyDatatableWrapper extends LightningElement {\n    COLS = [\n        { label: 'Account', type: 'text', fieldName: 'account', editable: false, displayReadOnlyIcon: true},\n        { label: 'Stage', type: 'text', fieldName: 'stage', editable: false, displayReadOnlyIcon: true},\n        { label: 'Amount', type: 'customNumber', fieldName: 'amount', editable: true,\n            typeAttributes: {\n                status: {fieldName: 'status'},\n                step: {fieldName: 'step'}\n            }\n        },\n        { label: 'Due Date', type: 'date', fieldName: 'date', editable: false, displayReadOnlyIcon: true}\n    ];\n\n    data = [\n        {account: 'Acme Corp.', amount: '200.00', status: 'action:user',\n            step: '0.01', stage:'Value Proposition', date: '2022-02-10T00:00:00Z'},\n        {account: 'Norwood Inc.', amount: '500000.00', status: 'action:user',\n            step: '0.01', stage:'Closed Won', date: '2022-01-20T00:00:00Z'},\n        {account: 'Edge Communications', amount: '800000.00', status: 'action:user',\n            step: '0.01', stage:'Closed Won', date: '2022-02-18T00:00:00Z'},\n        {account: 'Pyramid Construction Inc.', amount: '50000.00', status: 'action:user',\n            step: '0.01', stage:'Closed ', date: '2022-03-10T00:00:00Z'},\n        {account: 'GenePoint', amount: '30000', status: 'action:user',\n            step: '0.01', stage:'Negotiation\/Review\t', date: '2022-05-28T00:00:00Z'},\n        {account: 'Dickenson plc', amount: '1550000.00', status: 'action:user',\n            step: '0.01', stage:'Closed Won', date: '2022-03-16T00:00:00Z'}\n    ]<\/code><\/pre>\n\n\n\n
            \u4e0b\u9762\u662f\u5177\u6709\u53ef\u7f16\u8f91\u81ea\u5b9a\u4e49\u7c7b\u578b\u7684\u6269\u5c55\u6570\u636e\u8868\u7684\u6587\u4ef6\u5939\u3002<\/p>\n\n\n\n
            myCustomTypeDatatable\n   \u251c\u2500\u2500customNumber.html\n   \u251c\u2500\u2500customNumberEdit.html\n   \u251c\u2500\u2500myCustomTypeDatatable.js\n   \u2514\u2500\u2500myCustomTypeDatatable.js-meta.xml<\/code><\/pre>\n\n\n\n
            \u7f16\u8f91\u6a21\u677f\u5305\u542b\u53e6\u4e00\u4e2a\u5b9a\u4e49\u5185\u8054\u7f16\u8f91 UI \u7684\u7ec4\u4ef6\u3002<\/p>\n\n\n\n
            \/*customNumber.html*\/\n<template>\n  <c-my-fancy-number value={value}> <\/c-my-fancy-number>\n<\/template><\/code><\/pre>\n\n\n\n
            \u5b50\u7ec4\u4ef6\u5b9a\u4e49\u6570\u636e\u7c7b\u578b\u7684\u663e\u793a\uff0c\u5e76\u5305\u542b\u7528\u4e8e\u786e\u5b9a\u5e94\u7528\u4e8e\u6570\u636e\u7684\u6837\u5f0f\u7684\u903b\u8f91\u3002<\/p>\n\n\n\n
            \u8be5\u7ec4\u4ef6\u8bc4\u4f30\u6570\u636e\u4ee5\u5e94\u7528\u7c7b\u3001\u56fe\u6807\u548c\u56fe\u6807\u6837\u5f0f\u3002myFancyNumber<\/code><\/p>\n\n\n\n
            \/* myFancyNumber.html *\/\n\n<template>\n  <div class={computedClass}>\n    <lightning-formatted-number format-style=\"currency\" value={value}>\n    <\/lightning-formatted-number>\n    <lightning-icon\n      class=\"slds-p-horizontal_xx-small\"\n      icon-name={computedIcon}\n      size=\"xx-small\"\n      variant={iconVariant}\n    >\n    <\/lightning-icon>\n    ({range})\n  <\/div>\n<\/template><\/code><\/pre>\n\n\n\n
            \/\/ myFancyNumber.js\n\nimport { LightningElement, api, track, wire } from \"lwc\";\n\nexport default class MyFancyNumber extends LightningElement {\n  @api value;\n  get range() {\n    return this.value > 50000 ? \"High\" : \"Low\";\n  }\n  get computedClass() {\n    return this.value > 50000 ? \"slds-text-color_success\" : \"slds-text-color_error\";\n  }\n\n  get computedIcon() {\n    return this.value > 50000 ? \"utility:arrowup\" : \"utility:arrowdown\";\n  }\n\n  get iconVariant() {\n    return this.value > 50000 ? \"success\" : \"error\";\n  }\n}<\/code><\/pre>\n\n\n\n
            \u8be5\u6a21\u677f\u4f7f\u7528\u5e26\u6709 \u7684\u7ec4\u4ef6\u3002customNumberEdit.html<\/code>lightning-input<\/code>type=\"number\"<\/code><\/p>\n\n\n\n
            \/* customNumberEdit.html *\/\n<template>\n  <lightning-input\n    type=\"number\"\n    value={editedValue}\n    label={columnLabel}\n    required={required}\n    step={typeAttributes.step}\n    data-inputable=\"true\"\n  >\n  <\/lightning-input>\n<\/template><\/code><\/pre>\n\n\n\n
            \u4e0b\u9762\u662f\u5728\u4fdd\u5b58\u8868\u4e4b\u524d\u7f16\u8f91\u81ea\u5b9a\u4e49\u6570\u5b57\u7c7b\u578b\u5b57\u6bb5\u540e\u7684\u6570\u636e\u8868\u3002\u7f16\u8f91\u540e\u7684\u5b57\u6bb5\u4ee5\u9ec4\u8272\u7a81\u51fa\u663e\u793a\u3002<\/p>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            \u6709\u5173\u4fdd\u5b58\u5df2\u66f4\u6539\u6570\u636e\u7684\u4fe1\u606f\uff0c\u8bf7\u53c2\u9605\u4f7f\u7528\u5185\u8054\u7f16\u8f91\u5728\u8868\u4e2d\u663e\u793a\u6570\u636e\u3002<\/p>\n\n\n\n
            \u521b\u5efa\u8bb0\u5f55\u6570\u636e\u7684\u5206\u5c42\u8868<\/h2>\n\n\n\n
            \u8be5\u7ec4\u4ef6\u663e\u793a\u53ef\u5c55\u5f00\u4ee5\u663e\u793a\u5b50\u8bb0\u5f55\u7684\u6570\u636e\u884c\u3002lightning-tree-grid<\/code><\/p>\n\n\n\n
            \u8be5\u7ec4\u4ef6\u57fa\u4e8e\u5e76\u652f\u6301\u5176\u529f\u80fd\u7684\u5b50\u96c6\u3002\u8bf7\u53c2\u9605\u5728\u8868\u683c\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e\uff0c\u4ee5\u6bd4\u8f83\u6bcf\u4e2a\u7ec4\u4ef6\u63d0\u4f9b\u7684\u529f\u80fd\u3002lightning-tree-gridlightning-datatable<\/code><\/p>\n\n\n\n
            \u663e\u793a\u8bb0\u5f55\u548c\u5b50\u8bb0\u5f55<\/h2>\n\n\n\n
            \u8ba9\u6211\u4eec\u521b\u5efa\u4e00\u4e2a\u8868\u6765\u663e\u793a\u5177\u6709\u5173\u8054\u6848\u4f8b\u7684\u5e10\u6237\u3002\u6bcf\u4e2a\u884c\u7ea7\u64cd\u4f5c\u90fd\u5141\u8bb8\u60a8\u4f7f\u7528\u5bfc\u822a\u670d\u52a1\u7f16\u8f91\u5ba2\u6237\u6216\u6848\u4f8b\u8bb0\u5f55\u3002<\/p>\n\n\n\n
            \"\"<\/figure>\n\n\n\n
            \u8ba9\u6211\u4eec\u4f7f\u7528 Apex \u83b7\u53d6\u6570\u636e\u3002\u5728\u6b64\u793a\u4f8b\u4e2d\uff0c\u5305\u542b\u4e00\u4e2a SOQL \u8bed\u53e5\uff0c\u8be5\u8bed\u53e5\u8fd4\u56de\u5e10\u6237\u540d\u79f0\u548c\u72b6\u6001\u4e3a \u7684\u6240\u6709\u5173\u8054\u4e8b\u4f8b\u3002CaseController.cls<\/code>New<\/code><\/p>\n\n\n\n
            \/\/CaseController.cls\npublic with sharing class CaseController {\n    @AuraEnabled(cacheable=true)\n    public static list<Account> getNewCasesForAccounts(){\n        return [SELECT Name, (\n                SELECT Id, CaseNumber, Status FROM Cases WHERE toLabel(Status) = 'New')\n                FROM Account WHERE Id IN (SELECT AccountId FROM Case)];\n    }\n}<\/code><\/pre>\n\n\n\n
            \u5728 JavaScript \u6587\u4ef6\u4e2d\uff0c\u7528\u4e8e\u8c03\u7528 Apex \u65b9\u6cd5\u3002\u4f7f\u7528\u952e\u5b9a\u4e49\u5305\u542b\u5b50\u9879\u7684\u884c\u3002\u5305\u542b\u5b50\u9879\u7684\u884c\u663e\u793a\u5e26\u6709 V \u5f62\u6309\u94ae\uff0c\u7528\u4e8e\u5207\u6362\u5b50\u9879\u3002myTreeGrid.js<\/code>@wire<\/code>_children<\/code><\/p>\n\n\n\n
            \/\/myTreeGrid.js\nimport { LightningElement, wire, track } from \"lwc\";\nimport { NavigationMixin } from \"lightning\/navigation\";\n\nimport getNewCases from \"@salesforce\/apex\/CaseController.getNewCasesForAccounts\";\n\nconst actions = [{ label: \"Edit\", name: \"edit_record\" }];\n\nconst COLS = [\n  {\n    fieldName: \"Name\",\n    label: \"Account Name\",\n  },\n  {\n    fieldName: \"CaseNumber\",\n    label: \"New Cases\",\n    cellAttributes: {\n      iconName: { fieldName: \"iconName\" },\n    },\n  },\n  {\n    type: \"action\",\n    label: \"Edit Record\",\n    typeAttributes: {\n      rowActions: actions,\n      menuAlignment: \"right\",\n    },\n  },\n];\n\nexport default class MyTreeGrid extends NavigationMixin(LightningElement) {\n  @track myData = [];\n  columns = COLS;\n  error;\n\n  @wire(getNewCases)\n  wiredCases({ error, data }) {\n    if (error) {\n      \/\/ Handle error\n      this.error = error;\n    } else if (data) {\n      \/\/ Process record data\n      var strData = JSON.parse(JSON.stringify(data));\n\n      strData.map((row, index) => {\n        if (row[\"Cases\"]) {\n          row._children = row[\"Cases\"]; \/\/define rows with children\n          delete row.Cases;\n\n          let iconKey = \"iconName\";\n          row[iconKey] = \"standard:case\";\n        }\n      });\n      this.myData = strData;\n    }\n  }\n\n  handleRowAction(event) {\n    const action = event.detail.action;\n    const row = event.detail.row;\n    switch (action.name) {\n      case \"edit_record\":\n        this[NavigationMixin.Navigate]({\n          type: \"standard__objectPage\",\n          attributes: {\n            objectApiName: \"Case\",\n            actionName: \"edit\",\n            recordId: row.Id,\n          },\n        });\n        break;\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
            \u4f7f\u7528 \u521b\u5efa\u8868\u3002lightning-tree-grid<\/code><\/p>\n\n\n\n
            <!--myTreeGrid.html-->\n<template>\n  <lightning-tree-grid\n    columns={columns}\n    data={myData}\n    key-field=\"Id\"\n    onrowaction={handleRowAction}\n  >\n  <\/lightning-tree-grid>\n<\/template><\/code><\/pre>\n\n\n\n
            \u66f4\u6539\u8868\u5355\u663e\u793a\u5bc6\u5ea6<\/h2>\n\n\n\n
            \u5728 Lightning Experience \u4e2d\uff0c\u663e\u793a\u5bc6\u5ea6\u8bbe\u7f6e\u51b3\u5b9a\u4e86\u663e\u793a\u5185\u5bb9\u7684\u5bc6\u5ea6\u548c\u5b57\u6bb5\u6807\u7b7e\u7684\u4f4d\u7f6e\u3002\u5728\u201c\u8bbe\u7f6e\u201d\u4e2d\u4e3a\u7ec4\u7ec7\u63a7\u5236\u663e\u793a\u5bc6\u5ea6\uff0c\u7528\u6237\u8fd8\u53ef\u4ee5\u4ece\u5176\u914d\u7f6e\u6587\u4ef6\u83dc\u5355\u4e2d\u6839\u636e\u81ea\u5df1\u7684\u559c\u597d\u8bbe\u7f6e\u663e\u793a\u5bc6\u5ea6\u3002<\/p>\n\n\n\n
            \u7ec4\u7ec7\u7684\u8212\u9002\u8bbe\u7f6e\u5c06\u6807\u7b7e\u653e\u5728\u5b57\u6bb5\u7684\u9876\u90e8\uff0c\u5e76\u5728\u9875\u9762\u5143\u7d20\u4e4b\u95f4\u6dfb\u52a0\u66f4\u591a\u7a7a\u95f4\u3002\u76f8\u6bd4\u4e4b\u4e0b\uff0c\u7d27\u51d1\u89c6\u56fe\u662f\u66f4\u5bc6\u96c6\u7684\u89c6\u56fe\uff0c\u6807\u7b7e\u4e0e\u5b57\u6bb5\u4f4d\u4e8e\u540c\u4e00\u884c\u4e0a\uff0c\u884c\u4e0e\u884c\u4e4b\u95f4\u7684\u95f4\u8ddd\u66f4\u5c0f\u3002\u8212\u9002\u7684\u73af\u5883\u7c7b\u4f3c\u4e8e\u7d27\u51d1\uff0c\u4f46\u7ebf\u6761\u4e4b\u95f4\u6709\u66f4\u591a\u7684\u7a7a\u95f4\u3002<\/p>\n\n\n\n
            \u60a8\u53ef\u4ee5\u5c06\u8868\u5355\u8bbe\u8ba1\u4e3a\u9075\u5faa\u663e\u793a\u5bc6\u5ea6\u8bbe\u7f6e\uff0c\u6216\u8bbe\u7f6e\u8868\u5355\u5bc6\u5ea6\u4ee5\u8986\u76d6\u663e\u793a\u5bc6\u5ea6\u8bbe\u7f6e\u3002\u901a\u8fc7\u8986\u76d6\u663e\u793a\u5bc6\u5ea6\uff0c\u60a8\u53ef\u4ee5\u66f4\u597d\u5730\u63a7\u5236\u6807\u7b7e\u4f4d\u7f6e\uff0c\u4f46\u4e0d\u4f1a\u5f71\u54cd\u95f4\u8ddd\u3002\u6b64\u5916\uff0c\u60a8\u53ef\u4ee5\u5c06\u8868\u5355\u4e2d\u7684\u5404\u4e2a\u5b57\u6bb5\u8bbe\u7f6e\u4e3a\u4f7f\u7528\u66f4\u6539\u5b57\u6bb5\u6807\u7b7e\u4f4d\u7f6e\u7684\u53d8\u4f53\u3002<\/p>\n\n\n\n
            \u5728\u8868\u5355\u4e2d\u4f7f\u7528\u7ec4\u7ec7\u7684\u9ed8\u8ba4\u663e\u793a\u5bc6\u5ea6<\/h2>\n\n\n\n
            lightning-record-edit-form<\/code>\u3001 \uff0c\u5e76\u6839\u636e\u7ec4\u7ec7\u7684\u663e\u793a\u5bc6\u5ea6\u8fdb\u884c\u8c03\u6574\uff0c\u6216\u8005\u5728\u60a8\u8bbe\u7f6e \u65f6\u8fdb\u884c\u8c03\u6574\u3002lightning-record-view-form<\/code>lightning-record-form<\/code>density=\"auto\"<\/code><\/p>\n\n\n\n
            <lightning-card icon-name=\"standard:contact\" title=\"record-edit-form\">\n    <div class=\"slds-p-horizontal_small\">\n        <!-- Replace the record-id with your own -->\n        <lightning-record-edit-form record-id=\"003RM0000066Y82YAE\"\n                                  object-api-name=\"Contact\"\n                                  density=\"auto\">\n            <lightning-messages><\/lightning-messages>\n            <lightning-input-field field-name=\"FirstName\"><\/lightning-input-field>\n            <lightning-input-field field-name=\"LastName\"><\/lightning-input-field>\n            <lightning-input-field field-name=\"Email\"><\/lightning-input-field>\n            <lightning-input-field field-name=\"Phone\"><\/lightning-input-field>\n        <\/lightning-record-edit-form>\n    <\/div>\n<\/lightning-card><\/code><\/pre>\n\n\n\n
            \u8986\u76d6\u7ec4\u7ec7\u7684\u663e\u793a\u5bc6\u5ea6<\/h2>\n\n\n\n
            \u8981\u8986\u76d6\u7ec4\u7ec7\u7684\u663e\u793a\u5bc6\u5ea6\uff0c\u8bf7\u6307\u5b9a \u6216 \u3002\u8be5\u5c5e\u6027\u4e0d\u652f\u6301\u8be5\u503c\u3002\u5982\u679c\u7ec4\u7ec7\u7684\u663e\u793a\u5bc6\u5ea6\u8bbe\u7f6e\u4e3a\u8212\u9002\uff0c\u5219\u9ed8\u8ba4\u60c5\u51b5\u4e0b\u6807\u7b7e\u548c\u5b57\u6bb5\u4f4d\u4e8e\u540c\u4e00\u884c\u4e0a\u3002density=\"compact\"<\/code>density=\"comfy\"<\/code>cozy<\/code>density<\/code><\/p>\n\n\n\n
            \u4e0b\u8868\u5217\u51fa\u4e86\u7ec4\u7ec7\u7684\u663e\u793a\u5bc6\u5ea6\u8bbe\u7f6e\uff0c\u4ee5\u53ca\u5b83\u4eec\u4e0e \u3001 \u548c \u4e0a\u7684\u8868\u5355\u5bc6\u5ea6\u7684\u5173\u7cfb\u3002lightning-record-edit-form<\/code>lightning-record-view-form<\/code>lightning-record-form<\/code><\/p>\n\n\n\n
            \u7ec4\u7ec7\u663e\u793a\u5bc6\u5ea6<\/th>\u5f62\u6001\u5bc6\u5ea6<\/th>\u5b57\u6bb5\u6807\u7b7e\u5bf9\u9f50<\/th><\/tr><\/thead>
            \u8212\u9002<\/td>auto<\/code>\uff08\u9ed8\u8ba4\uff09\u6216comfy<\/code><\/td>\u6807\u7b7e\u4f4d\u4e8e\u5b57\u6bb5\u4e0a\u65b9<\/td><\/tr>
             <\/td>compact<\/code><\/td>\u6807\u7b7e\u548c\u5b57\u6bb5\u5728\u540c\u4e00\u884c\u4e0a<\/td><\/tr>
            \u8212\u9002<\/td>auto<\/code>\uff08\u9ed8\u8ba4\uff09\u6216compact<\/code><\/td>\u6807\u7b7e\u548c\u5b57\u6bb5\u5728\u540c\u4e00\u884c\u4e0a<\/td><\/tr>
             <\/td>comfy<\/code><\/td>\u6807\u7b7e\u4f4d\u4e8e\u5b57\u6bb5\u4e0a\u65b9<\/td><\/tr>
            \u7d27\u51d1\u7684<\/td>auto<\/code>\uff08\u9ed8\u8ba4\uff09\u6216compact<\/code><\/td>\u6807\u7b7e\u548c\u5b57\u6bb5\u5728\u540c\u4e00\u884c\u4e0a<\/td><\/tr>
             <\/td>comfy<\/code><\/td>\u6807\u7b7e\u4f4d\u4e8e\u5b57\u6bb5\u4e0a\u65b9<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
            \u51cf\u5c11\u6807\u7b7e\u548c\u5b57\u6bb5\u4e4b\u95f4\u7684\u7a7a\u95f4<\/h2>\n\n\n\n
            \u5f53\u8868\u5355\u5bc6\u5ea6\u4e3a \u65f6\uff0c\u6807\u7b7e\u548c\u5b57\u6bb5\u5bf9\u4e8e\u8f83\u5927\u533a\u57df\u4e2d\u7684\u5355\u4e2a\u5217\u8868\u5355\u6765\u8bf4\u53ef\u80fd\u663e\u5f97\u592a\u8fdc\u3002\u8981\u5728\u8868\u5355\u4f7f\u7528\u7d27\u51d1\u5bc6\u5ea6\u65f6\u51cf\u5c0f\u6807\u7b7e\u548c\u5b57\u6bb5\u4e4b\u95f4\u7684\u95f4\u8ddd\uff0c\u8bf7\u4f7f\u7528 on \u6216 \u4e0a\u7684\u7c7b\u3002compact<\/code>slds-form-element_1-col<\/code>lightning-input-field<\/code>lightning-output-field<\/code><\/p>\n\n\n\n
            <lightning-card icon-name=\"standard:contact\" title=\"record-edit-form\">\n    <div class=\"slds-p-horizontal_small\">\n        <!-- Replace the record-id with your own -->\n        <lightning-record-edit-form record-id=\"003RM0000066Y82YAE\"\n                                  object-api-name=\"Contact\"\n                                  density=\"compact\">\n            <lightning-messages><\/lightning-messages>\n            <lightning-input-field field-name=\"FirstName\" class=\"slds-form-element_1-col\"><\/lightning-input-field>\n            <lightning-input-field field-name=\"LastName\" class=\"slds-form-element_1-col\"><\/lightning-input-field>\n            <lightning-input-field field-name=\"Email\" class=\"slds-form-element_1-col\"><\/lightning-input-field>\n            <lightning-input-field field-name=\"Phone\" class=\"slds-form-element_1-col\"><\/lightning-input-field>\n\n        <\/lightning-record-edit-form>\n    <\/div>\n<\/lightning-card><\/code><\/pre>\n\n\n\n
            \u5728\u8868\u5355\u57df\u4e0a\u8bbe\u7f6e\u6807\u7b7e\u53d8\u4f53<\/h2>\n\n\n\n
            \u5982\u679c\u60a8\u5e0c\u671b\u7279\u5b9a\u5b57\u6bb5\u7684\u6807\u7b7e\u548c\u5b57\u6bb5\u5bf9\u9f50\u65b9\u5f0f\u4e0e\u8868\u5355\u4f7f\u7528\u7684\u6807\u7b7e\u548c\u5b57\u6bb5\u5bf9\u9f50\u65b9\u5f0f\u4e0d\u540c\uff0c\u5219\u53ef\u4ee5\u8bbe\u7f6e\u53d8\u4f53\u3002\u53d8\u4f53\u5c06\u8986\u76d6\u8be5\u5b57\u6bb5\u7684\u663e\u793a\u5bc6\u5ea6\u3002lightning-input-field<\/code><\/p>\n\n\n\n
            lightning-input-field<\/code>\u652f\u6301\u4ee5\u4e0b\u53d8\u4f53\uff1a\uff08\u9ed8\u8ba4\uff09\u3001\u3001 \u548c \u3002standard<\/code>label-hidden<\/code>label-inline<\/code>label-stacked<\/code><\/p>\n\n\n\n
            \u6b64\u793a\u4f8b\u663e\u793a\u4e24\u4e2a\u5e26\u6709\u5185\u8054\u6807\u7b7e\u7684\u8f93\u5165\u5b57\u6bb5\uff0c\u800c\u5176\u4f59\u5b57\u6bb5\u7684\u6807\u7b7e\u5219\u7531\u4e8e\u8868\u5355\u5bc6\u5ea6\u8212\u9002\u800c\u663e\u793a\u5728\u5b57\u6bb5\u9876\u90e8\u3002<\/p>\n\n\n\n
            <lightning-card icon-name=\"standard:contact\" title=\"record-edit-form\">\n    <div class=\"slds-p-horizontal_small\">\n        <!-- Replace the recordId with your own -->\n        <lightning-record-edit-form record-id=\"003RM0000066Y82YAE\"\n                                  object-api-name=\"Contact\"\n                                  density=\"comfy\">\n            <lightning-messages><\/lightning-messages>\n            <lightning-input-field field-name=\"FirstName\" variant=\"label-inline\"><\/lightning-input-field>\n            <lightning-input-field field-name=\"LastName\" variant=\"label-inline\"><\/lightning-input-field>\n            <lightning-input-field field-name=\"Email\"><\/lightning-input-field>\n            <lightning-input-field field-name=\"Phone\"><\/lightning-input-field>\n        <\/lightning-record-edit-form>\n    <\/div>\n<\/lightning-card><\/code><\/pre>\n\n\n\n
            lightning-output-field<\/code>\u652f\u6301\u4ee5\u4e0b\u53d8\u4f53\uff1a\uff08\u9ed8\u8ba4\uff09\u548c .standard<\/code>label-hidden<\/code><\/p>\n\n\n\n
            \u672c\u793a\u4f8b\u5728\u8868\u5355\u5bc6\u5ea6\u4e3a \u65f6\u663e\u793a\u4e0d\u5e26\u6807\u7b7e\u7684\u8f93\u51fa\u5b57\u6bb5\u503c\u3002\u9690\u85cf\u6807\u7b7e\u53ef\u7528\u4e8e\u8f85\u52a9\u6280\u672f\u3002comfy<\/code><\/p>\n\n\n\n
            <lightning-card icon-name=\"standard:contact\" title=\"record-view-form\">\n    <div class=\"slds-p-horizontal_small\">\n        <!-- Replace the recordId with your own -->\n        <lightning-record-view-form record-id=\"003RM0000066Y82YAE\"\n                                  object-api-name=\"Contact\"\n                                  density=\"comfy\">\n            <lightning-messages><\/lightning-messages>\n            <lightning-output-field field-name=\"FirstName\" variant=\"label-hidden\"><\/lightning-output-field>\n            <lightning-output-field field-name=\"LastName\" variant=\"label-hidden\"><\/lightning-output-field>\n            <lightning-output-field field-name=\"Email\" variant=\"label-hidden\"><\/lightning-output-field>\n            <lightning-output-field field-name=\"Phone\" variant=\"label-hidden\"><\/lightning-output-field>\n        <\/lightning-record-view-form>\n    <\/div>\n<\/lightning-card><\/code><\/pre>\n\n\n\n
            \u6b64\u5916\uff0c\u8981\u5728\u6807\u7b7e\u53d8\u4f53\u4e3a \u65f6\u51cf\u5c0f\u6807\u7b7e\u548c\u5b57\u6bb5\u4e4b\u95f4\u7684\u95f4\u8ddd\uff0c\u8bf7\u4f7f\u7528 \u4e0a\u7684\u7c7b\u3002label-inline<\/code>slds-form-element_1-col<\/code>lightning-input-field<\/code><\/p>\n\n\n\n
            \u4f7f\u7528\u6ce8\u610f\u4e8b\u9879<\/h2>\n\n\n\n
            \u7ba1\u7406\u5458\u53ef\u4ee5\u5728\u201c\u5bc6\u5ea6\u8bbe\u7f6e\u201d\u8bbe\u7f6e\u9875\u9762\u4e0a\u4e3a\u7ec4\u7ec7\u8bbe\u7f6e\u9ed8\u8ba4\u663e\u793a\u5bc6\u5ea6\u3002\u7528\u6237\u53ef\u4ee5\u968f\u65f6\u9009\u62e9\u81ea\u5df1\u7684\u663e\u793a\u5bc6\u5ea6\u3002\u7ba1\u7406\u5458\u65e0\u6cd5\u8986\u76d6\u7528\u6237\u7684\u663e\u793a\u5bc6\u5ea6\u8bbe\u7f6e\u3002\u7ec4\u7ec7\u7684\u9ed8\u8ba4\u663e\u793a\u8bbe\u7f6e\u53d6\u51b3\u4e8e Salesforce \u7248\u672c\u3002\u5bc6\u5ea6\u66f4\u6539\u4e0d\u9002\u7528\u4e8e Salesforce Classic\u3001Experience Cloud \u7ad9\u70b9\u6216 Salesforce \u79fb\u52a8\u5e94\u7528\u7a0b\u5e8f\u3002\u6709\u5173\u8be6\u7ec6\u4fe1\u606f\uff0c\u8bf7\u53c2\u9605\u914d\u7f6e\u7528\u6237\u754c\u9762\u8bbe\u7f6e\u3002<\/p>\n\n\n\n
            \u4f7f\u7528\u8bb0\u5f55\u7684\u6ce8\u610f\u4e8b\u9879<\/h2>\n\n\n\n
            \u4f7f\u7528\u57fa\u672c\u7ec4\u4ef6\u5904\u7406\u8bb0\u5f55\u540e\uff0c\u60a8\u65e0\u9700\u989d\u5916\u914d\u7f6e\u5373\u53ef\u4f7f\u7528 Lightning \u6570\u636e\u670d\u52a1\uff0c\u4f46\u9700\u8981\u8003\u8651\u4e00\u4e9b\u81ea\u5b9a\u4e49\u7528\u4f8b\u3002<\/p>\n\n\n\n
            \u8bf7\u8003\u8651\u4ee5\u4e0b\u7528\u4f8b\u3002<\/p>\n\n\n\n
              \n
            • \u82e5\u8981\u663e\u793a\u57fa\u4e8e\u8bb0\u5f55\u7c7b\u578b\u7684\u8bb0\u5f55\u7a97\u4f53\uff08\u5305\u62ec\u57fa\u4e8e\u8bb0\u5f55\u7c7b\u578b\u7684\u9009\u62e9\u5217\u8868\u503c\uff09\uff0c\u8bf7\u83b7\u53d6\u8bb0\u5f55\u7c7b\u578b ID\u3002<\/li>\n\n\n\n
            • \u82e5\u8981\u901a\u77e5\u7236\u7ec4\u4ef6\u8bb0\u5f55\u63d0\u4ea4\u6210\u529f\uff0c\u8bf7\u8c03\u5ea6\u548c\u5904\u7406\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002<\/li>\n<\/ul>\n\n\n\n
              \u83b7\u53d6\u8bb0\u5f55\u7c7b\u578b ID<\/h2>\n\n\n\n
              \u9009\u62e9\u5217\u8868\u5b57\u6bb5\u6839\u636e\u60a8\u7684\u8bb0\u5f55\u7c7b\u578b\u663e\u793a\u503c\u3002\u4f7f\u7528 or \u65f6\uff0c\u5982\u679c\u4e00\u4e2a\u5bf9\u8c61\u4e0a\u6709\u591a\u4e2a\u8bb0\u5f55\u7c7b\u578b\uff0c\u5e76\u4e14\u6ca1\u6709\u9ed8\u8ba4\u8bb0\u5f55\u7c7b\u578b\uff0c\u5219\u5fc5\u987b\u63d0\u4f9b\u8bb0\u5f55\u7c7b\u578b ID\u3002\u5426\u5219\uff0c\u5c06\u4f7f\u7528\u9ed8\u8ba4\u8bb0\u5f55\u7c7b\u578b Id\u3002lightning-record-form<\/code>lightning-record-edit-form<\/code><\/p>\n\n\n\n
              \u82e5\u8981\u68c0\u7d22\u8bb0\u5f55\u7c7b\u578b\u4fe1\u606f\uff0c\u8bf7\u4f7f\u7528\u00a0getObjectInfo<\/code>\u00a0\u7ebf\u8def\u9002\u914d\u5668\u3002<\/p>\n\n\n\n
              \u4f8b<\/h2>\n\n\n\n
              \u793a\u4f8b\uff1a\u4f7f\u7528 record-type-id \u5c5e\u6027<\/h2>\n\n\n\n
              \u901a\u8fc7\u63d0\u4f9b\u5c5e\u6027\uff0c\u6839\u636e\u8bb0\u5f55\u7c7b\u578b\u663e\u793a\u8bb0\u5f55\u521b\u5efa\u8868\u5355\u3002\u6b64\u793a\u4f8b\u663e\u793a\u53ef\u4ee5\u653e\u7f6e\u5728\u5ba2\u6237\u8bb0\u5f55\u9875\u4e0a\u7684\u7a97\u4f53\u3002\u8868\u5355\u663e\u793a\u5b57\u6bb5\uff0c\u5176\u4e2d\u5305\u62ec\u4e00\u4e2a\u9009\u62e9\u5217\u8868\uff0c\u5176\u503c\u57fa\u4e8e\u7ed9\u5b9a\u7684\u8bb0\u5f55\u7c7b\u578b ID\u3002record-type-id<\/code><\/p>\n\n\n\n
              <template>\n  <lightning-card title=\"Record Form with Record Type\" icon-name=\"standard:account\">\n    <div lwc:if={objectInfo.data} class=\"slds-m-around_medium\">\n      <lightning-record-form\n        object-api-name={objectApiName}\n        record-type-id={recordTypeId}\n        fields={fields}\n      >\n      <\/lightning-record-form>\n    <\/div>\n  <\/lightning-card>\n<\/template><\/code><\/pre>\n\n\n\n
              \u5bfc\u5165\u6a21\u5757\u548c\u5bf9\u5e10\u6237\u5bf9\u8c61\u7684\u5f15\u7528\u3002getter \u8fd4\u56de\u4e0e\u8bb0\u5f55\u7c7b\u578b\u540d\u79f0\u5339\u914d\u7684 Id\u3002getObjectInfo<\/code>recordTypeId<\/code>Special Account<\/code><\/p>\n\n\n\n
              import { LightningElement, api, wire, track } from \"lwc\";\nimport { getObjectInfo } from \"lightning\/uiObjectInfoApi\";\nimport ACCOUNT_OBJECT from \"@salesforce\/schema\/Account\";\nimport NAME_FIELD from \"@salesforce\/schema\/Account.Name\";\nimport PHONE_FIELD from \"@salesforce\/schema\/Account.Phone\";\nimport INDUSTRY_FIELD from \"@salesforce\/schema\/Account.Industry\";\n\nexport default class RecordFormWithRecordType extends LightningElement {\n  \/\/ Flexipage provides recordId and objectApiName\n  @api recordId;\n  @api objectApiName;\n\n  @track objectInfo;\n\n  \/\/ Define fields to display in form\n  \/\/ Industry field is a picklist\n  fields = [NAME_FIELD, PHONE_FIELD, INDUSTRY_FIELD];\n\n  @wire(getObjectInfo, { objectApiName: ACCOUNT_OBJECT })\n  objectInfo;\n\n  get recordTypeId() {\n    const rtis = this.objectInfo.data.recordTypeInfos;\n    return Object.keys(rtis).find((rti) => rtis[rti].name === \"Special Account\");\n  }\n}<\/code><\/pre>\n\n\n\n
              \u8be5\u5c5e\u6027\u8fd4\u56de\u7ec4\u7ec7\u4e2d\u53ef\u7528\u7684\u8bb0\u5f55\u7c7b\u578b ID \u7684\u6620\u5c04\u3002recordTypeInfos<\/code><\/p>\n\n\n\n
              \u5904\u7406\u7a97\u4f53\u4e0a\u7684\u81ea\u5b9a\u4e49\u4e8b\u4ef6<\/h2>\n\n\n\n
              \u3001 \u548c \u7ec4\u4ef6\u901a\u8fc7 \u3001 \u548c \u5c5e\u6027\u8fdb\u884c\u4e8b\u4ef6\u5904\u7406\u3002\u8981\u5c06\u8868\u5355\u6570\u636e\u4f20\u9012\u5230\u5bb9\u5668\u7ec4\u4ef6\uff0c\u8bf7\u521b\u5efa\u81ea\u5b9a\u4e49\u4e8b\u4ef6\u3002lightning-record-form<\/code>lightning-record-edit-form<\/code>lightning-record-view-form<\/code>onsubmit<\/code>onsuccess<\/code>onerror<\/code><\/p>\n\n\n\n
              \u5047\u8bbe\u4f60\u6709\u4e00\u4e2a\u5bb9\u5668\u7ec4\u4ef6\uff0c\u5e76\u4e14\u4f60\u7684\u8868\u5355\u5728\u7ec4\u4ef6\u4e2d\u3002\u8ba9\u6211\u4eec\u5c06\u65b0\u8bb0\u5f55\u7684 Id \u4f20\u9012\u7ed9\u5bb9\u5668\u7ec4\u4ef6\u3002\u5728 \u4e2d\uff0c\u521b\u5efa\u4e00\u4e2a \u7684\u5b9e\u4f8b\u3002c-wrapper<\/code>c-account-creator<\/code>c-wrapper<\/code>c-account-creator<\/code><\/p>\n\n\n\n
              <!-- wrapper.html -->\n<template>\n  <c-account-creator onnewrecord={handleNewRecord}><\/c-account-creator>\n<\/template><\/code><\/pre>\n\n\n\n
              \u6210\u529f\u521b\u5efa\u8bb0\u5f55\u540e\uff0c\u5904\u7406\u7a0b\u5e8f\u5c06\u8c03\u5ea6\u8be5\u4e8b\u4ef6\uff0c\u7136\u540e\u8be5\u5904\u7406\u7a0b\u5e8f\u5c06\u8c03\u7528\u5177\u6709\u8bb0\u5f55 ID \u7684\u65b9\u6cd5\u3002newrecord<\/code>onsuccess<\/code>lightning-record-form<\/code>handleNewRecord<\/code><\/p>\n\n\n\n
              \/\/ wrapper.js\nimport { LightningElement } from \"lwc\";\n\nexport default class Wrapper extends LightningElement {\n  recordId;\n\n  \/**\n   * Handles the new record event.\n   *\/\n  handleNewRecord(evt) {\n    const recordId = evt.detail.data.id;\n    this.recordId = recordId;\n  }\n}<\/code><\/pre>\n\n\n\n
              \u5728 \u4e2d\uff0c\u8be5\u5c5e\u6027\u663e\u793a\u4e00\u6761\u6d88\u606f\uff0c\u5176\u4e2d\u5305\u542b\u65b0\u521b\u5efa\u7684\u8bb0\u5f55\u7684 ID\u3002c-account-creator<\/code>createStatus<\/code><\/p>\n\n\n\n
              \u6ce8\u610f<\/p>\n\n\n\n
              \u8be5 ID \u5728\u4e8b\u4ef6\u4e2d\u4e0d\u53ef\u7528\u3002\u4f7f\u7528\u8be5\u4e8b\u4ef6\u8fd4\u56de Id\u3002submit<\/code>success<\/code><\/p>\n\n\n\n
              <!-- c-account-creator -->\n<template>\n  <lightning-record-form\n    object-api-name={accountObject}\n    fields={accountFields}\n    mode=\"edit\"\n    onsuccess={handleAccountCreated}\n  >\n  <\/lightning-record-form>\n  <span class=\"slds-m-around_small status\">{createStatus}<\/span>\n<\/template><\/code><\/pre>\n\n\n\n
              \u8be5\u65b9\u6cd5\u5904\u7406\u4e8b\u4ef6\u3002handleAccountCreated<\/code>success<\/code><\/p>\n\n\n\n
              import { LightningElement } from \"lwc\";\nimport ACCOUNT_OBJECT from \"@salesforce\/schema\/Account\";\nimport NAME_FIELD from \"@salesforce\/schema\/Account.Name\";\nimport WEBSITE_FIELD from \"@salesforce\/schema\/Account.Website\";\n\n\/**\n * Creates Account records.\n *\/\nexport default class AccountCreator extends LightningElement {\n  \/** Status message when creating an Account. *\/\n  createStatus = \"\";\n\n  accountObject = ACCOUNT_OBJECT;\n\n  accountFields = [NAME_FIELD, WEBSITE_FIELD];\n\n  \/** Handles successful Account creation. *\/\n  handleAccountCreated(evt) {\n    this.createStatus = `Account record created. Id is ${evt.detail.id}.`;\n\n    const event = new CustomEvent(\"newrecord\", {\n      detail: { data: evt.detail },\n    });\n    this.dispatchEvent(event);\n  }\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
              \u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e
              \n\u82e5\u8981\u663e\u793a\u8bb0\u5f55\u6570\u636e\u7684\u884c\u548c\u5217\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002\u82e5\u8981\u5728\u5177\u6709\u7ed3\u6784\u5c42\u6b21\u7ed3\u6784\u7684\u8868\u4e2d\u663e\u793a\u6570\u636e\uff0c\u4f8b\u5982\u5ba2\u6237\u8bb0\u5f55\u548c\u5173\u8054\u7684\u8054\u7cfb\u4eba\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002lightning-datatablelightning-tree-grid<\/p>\n","protected":false},"author":1,"featured_media":3859,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[233],"tags":[249],"class_list":["post-3858","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-lightning-web-","tag-249"],"yoast_head":"\n\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e - \u767d\u767d\u968f\u7b14<\/title>\n<meta name=\"description\" content=\"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e\u82e5\u8981\u663e\u793a\u8bb0\u5f55\u6570\u636e\u7684\u884c\u548c\u5217\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002\u82e5\u8981\u5728\u5177\u6709\u7ed3\u6784\u5c42\u6b21\u7ed3\u6784\u7684\u8868\u4e2d\u663e\u793a\u6570\u636e\uff0c\u4f8b\u5982\u5ba2\u6237\u8bb0\u5f55\u548c\u5173\u8054\u7684\u8054\u7cfb\u4eba\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002lightning-datatablelightning-tree-grid\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.ponybai.com\/?p=3858\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e - \u767d\u767d\u968f\u7b14\" \/>\n<meta property=\"og:description\" content=\"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e\u82e5\u8981\u663e\u793a\u8bb0\u5f55\u6570\u636e\u7684\u884c\u548c\u5217\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002\u82e5\u8981\u5728\u5177\u6709\u7ed3\u6784\u5c42\u6b21\u7ed3\u6784\u7684\u8868\u4e2d\u663e\u793a\u6570\u636e\uff0c\u4f8b\u5982\u5ba2\u6237\u8bb0\u5f55\u548c\u5173\u8054\u7684\u8054\u7cfb\u4eba\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002lightning-datatablelightning-tree-grid\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.ponybai.com\/?p=3858\" \/>\n<meta property=\"og:site_name\" content=\"\u767d\u767d\u968f\u7b14\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-15T07:36:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-02T07:53:42+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/display.png\" \/>\n\t<meta property=\"og:image:width\" content=\"839\" \/>\n\t<meta property=\"og:image:height\" content=\"386\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"ponybai\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"ponybai\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/www.ponybai.com\/?p=3858#article\",\"isPartOf\":{\"@id\":\"http:\/\/www.ponybai.com\/?p=3858\"},\"author\":{\"name\":\"ponybai\",\"@id\":\"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883\"},\"headline\":\"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e\",\"datePublished\":\"2024-01-15T07:36:52+00:00\",\"dateModified\":\"2023-12-02T07:53:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/www.ponybai.com\/?p=3858\"},\"wordCount\":117,\"publisher\":{\"@id\":\"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883\"},\"keywords\":[\"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e\"],\"articleSection\":[\"Lightning Web \u7ec4\u4ef6\u5f00\u53d1\u4eba\u5458\u6307\u5357\"],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.ponybai.com\/?p=3858\",\"url\":\"http:\/\/www.ponybai.com\/?p=3858\",\"name\":\"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e - \u767d\u767d\u968f\u7b14\",\"isPartOf\":{\"@id\":\"http:\/\/www.ponybai.com\/#website\"},\"datePublished\":\"2024-01-15T07:36:52+00:00\",\"dateModified\":\"2023-12-02T07:53:42+00:00\",\"description\":\"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e\u82e5\u8981\u663e\u793a\u8bb0\u5f55\u6570\u636e\u7684\u884c\u548c\u5217\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002\u82e5\u8981\u5728\u5177\u6709\u7ed3\u6784\u5c42\u6b21\u7ed3\u6784\u7684\u8868\u4e2d\u663e\u793a\u6570\u636e\uff0c\u4f8b\u5982\u5ba2\u6237\u8bb0\u5f55\u548c\u5173\u8054\u7684\u8054\u7cfb\u4eba\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002lightning-datatablelightning-tree-grid\",\"breadcrumb\":{\"@id\":\"http:\/\/www.ponybai.com\/?p=3858#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.ponybai.com\/?p=3858\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.ponybai.com\/?p=3858#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"http:\/\/www.ponybai.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.ponybai.com\/#website\",\"url\":\"http:\/\/www.ponybai.com\/\",\"name\":\"\u767d\u767d\u968f\u7b14\",\"description\":\"Salesforce\u5b98\u65b9\u8bb2\u5e08\",\"publisher\":{\"@id\":\"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.ponybai.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883\",\"name\":\"ponybai\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"http:\/\/www.ponybai.com\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2025\/03\/cropped-Ihsans-WeChatQR.jpg\",\"contentUrl\":\"http:\/\/www.ponybai.com\/wp-content\/uploads\/2025\/03\/cropped-Ihsans-WeChatQR.jpg\",\"width\":248,\"height\":248,\"caption\":\"ponybai\"},\"logo\":{\"@id\":\"http:\/\/www.ponybai.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/121.37.188.161\"],\"url\":\"http:\/\/www.ponybai.com\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e - \u767d\u767d\u968f\u7b14","description":"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e\u82e5\u8981\u663e\u793a\u8bb0\u5f55\u6570\u636e\u7684\u884c\u548c\u5217\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002\u82e5\u8981\u5728\u5177\u6709\u7ed3\u6784\u5c42\u6b21\u7ed3\u6784\u7684\u8868\u4e2d\u663e\u793a\u6570\u636e\uff0c\u4f8b\u5982\u5ba2\u6237\u8bb0\u5f55\u548c\u5173\u8054\u7684\u8054\u7cfb\u4eba\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002lightning-datatablelightning-tree-grid","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.ponybai.com\/?p=3858","og_locale":"zh_CN","og_type":"article","og_title":"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e - \u767d\u767d\u968f\u7b14","og_description":"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e\u82e5\u8981\u663e\u793a\u8bb0\u5f55\u6570\u636e\u7684\u884c\u548c\u5217\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002\u82e5\u8981\u5728\u5177\u6709\u7ed3\u6784\u5c42\u6b21\u7ed3\u6784\u7684\u8868\u4e2d\u663e\u793a\u6570\u636e\uff0c\u4f8b\u5982\u5ba2\u6237\u8bb0\u5f55\u548c\u5173\u8054\u7684\u8054\u7cfb\u4eba\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002lightning-datatablelightning-tree-grid","og_url":"http:\/\/www.ponybai.com\/?p=3858","og_site_name":"\u767d\u767d\u968f\u7b14","article_published_time":"2024-01-15T07:36:52+00:00","article_modified_time":"2023-12-02T07:53:42+00:00","og_image":[{"width":839,"height":386,"url":"http:\/\/www.ponybai.com\/wp-content\/uploads\/2023\/12\/display.png","type":"image\/png"}],"author":"ponybai","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"ponybai","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"7 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.ponybai.com\/?p=3858#article","isPartOf":{"@id":"http:\/\/www.ponybai.com\/?p=3858"},"author":{"name":"ponybai","@id":"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883"},"headline":"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e","datePublished":"2024-01-15T07:36:52+00:00","dateModified":"2023-12-02T07:53:42+00:00","mainEntityOfPage":{"@id":"http:\/\/www.ponybai.com\/?p=3858"},"wordCount":117,"publisher":{"@id":"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883"},"keywords":["\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e"],"articleSection":["Lightning Web \u7ec4\u4ef6\u5f00\u53d1\u4eba\u5458\u6307\u5357"],"inLanguage":"zh-Hans"},{"@type":"WebPage","@id":"http:\/\/www.ponybai.com\/?p=3858","url":"http:\/\/www.ponybai.com\/?p=3858","name":"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e - \u767d\u767d\u968f\u7b14","isPartOf":{"@id":"http:\/\/www.ponybai.com\/#website"},"datePublished":"2024-01-15T07:36:52+00:00","dateModified":"2023-12-02T07:53:42+00:00","description":"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e\u82e5\u8981\u663e\u793a\u8bb0\u5f55\u6570\u636e\u7684\u884c\u548c\u5217\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002\u82e5\u8981\u5728\u5177\u6709\u7ed3\u6784\u5c42\u6b21\u7ed3\u6784\u7684\u8868\u4e2d\u663e\u793a\u6570\u636e\uff0c\u4f8b\u5982\u5ba2\u6237\u8bb0\u5f55\u548c\u5173\u8054\u7684\u8054\u7cfb\u4eba\uff0c\u8bf7\u4f7f\u7528\u8be5\u7ec4\u4ef6\u3002lightning-datatablelightning-tree-grid","breadcrumb":{"@id":"http:\/\/www.ponybai.com\/?p=3858#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.ponybai.com\/?p=3858"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.ponybai.com\/?p=3858#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"http:\/\/www.ponybai.com\/"},{"@type":"ListItem","position":2,"name":"\u5728\u8868\u4e2d\u663e\u793a\u8bb0\u5f55\u6570\u636e"}]},{"@type":"WebSite","@id":"http:\/\/www.ponybai.com\/#website","url":"http:\/\/www.ponybai.com\/","name":"\u767d\u767d\u968f\u7b14","description":"Salesforce\u5b98\u65b9\u8bb2\u5e08","publisher":{"@id":"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.ponybai.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"http:\/\/www.ponybai.com\/#\/schema\/person\/935c7592c850c65e1e5eba4530dbf883","name":"ponybai","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"http:\/\/www.ponybai.com\/#\/schema\/person\/image\/","url":"http:\/\/www.ponybai.com\/wp-content\/uploads\/2025\/03\/cropped-Ihsans-WeChatQR.jpg","contentUrl":"http:\/\/www.ponybai.com\/wp-content\/uploads\/2025\/03\/cropped-Ihsans-WeChatQR.jpg","width":248,"height":248,"caption":"ponybai"},"logo":{"@id":"http:\/\/www.ponybai.com\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/121.37.188.161"],"url":"http:\/\/www.ponybai.com\/?author=1"}]}},"_links":{"self":[{"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/posts\/3858","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3858"}],"version-history":[{"count":1,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/posts\/3858\/revisions"}],"predecessor-version":[{"id":3864,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/posts\/3858\/revisions\/3864"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=\/wp\/v2\/media\/3859"}],"wp:attachment":[{"href":"http:\/\/www.ponybai.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3858"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3858"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ponybai.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3858"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}