Salesforce LWC学习(十八) datatable展示 image

https://developer.salesforce.com/docs/component-library/bundle/lightning-datatable/documentation

https://www.lightningdesignsystem.com/components/data-tables/

我们在salesforce中,经常会使用 listview,标准的 lightning listview会有排序,filter展示chart等等标准功能。当然,某些情况标准搞定不了情况下,我们便需要使用自定义的开发。自定义开发我们就可以使用 lightning-datatable组件。一个 lightning-datatable组件用来展示表格数据,它可以根据数据类型展示每一列。比如一个 email类型的字段会展示一个点开以后是一个 mail:to的超链接。默认展示的类型是text类型。那 lightning-datatable有哪些特性呢?

展示和格式化焗油适当类型的列

具有无限滚动行功能

指定的数据类型允许 inline编辑

可以定义header的action

可以定义行级别的action

重置每一列展示的大小

选择行操作

指定的列通过升序或者降序排列

文字换行和剪切

对行进行编号

设置单元格对齐方式

lightning-datatable有很多属性,其他的请自行查看文档,这里只例举几个核心属性或者方法。比较核心的如下:

columns:一组列的object用来定义数据类型,这个object有很多的属性,其中有几个必填的配置: label & fieldName & type。分别对应着字段的展示名称,字段的API name以及字段的类型,不同的字段类型将会自动的转换成不同的展示形式,默认是text。其他的属性我们后期会有简单介绍。

data:一组数据用来展示,通常 comulns设置表单的头以及每个单元列的类型,data设置内容;

hide-checkbox-column:标签用来设定是否展示左侧的checkbox,值为true/false,true即隐藏checkbox;

selected-rows:用来初始化时展示哪些行是被选中的;

key-field:用来指定每行的unique id;

getSelectedRows:这个是lightning-datatable提供的方法,用来获取哪些行用户选中的。

简单介绍完毕,下面通过几点来慢慢带入datatable的功能。

一. 基础 Datatable展示数据

demo中展示,我们来看官方提供的一个demo。

dataTableExample1.html:用来展示一个 datatable,我们看到属性中的data / columns / key-field都是上面描述过的, onrowselection方法为当有行选择的时候的调用

<template> <lightning-datatable data={data} columns={columns} key-field="id" onrowselection={getSelectedName}> </lightning-datatable> </template>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zydjsf.html