Liv Web2文档

Appearance

从 Liv Web 1 迁移 ​

fieldFormat属性变更 ​

在v1版本中统一提供了fieldFormat属性用于格式化DataTable、DataDescriptions组件内容，在v2版本中已移除fieldFormat属性，DataTable组件请使用组件自带的formatter属性，DataDescriptions也提供了相应的formatter方法。

DataTable ​

使用原生formatter属性。

ts
const fields: DataTableFields = [
  {
    prop: 'contactName',
    label: '联系人',
    fieldFormat: (value, data) => `${value}（${data.contactTelephone}）`, 
    formatter: (row, column, cellValue) => `${cellValue}（${row.contactTelephone}）`, 
  },
];

DataDescriptions ​

无原生formatter属性，使用组件提供的formatter属性。

ts
const fields: DataDescriptionsFields = [
  {
    prop: 'contactName',
    label: '联系人',
    fieldFormat: (value, data) => `${value}（${data.contactTelephone}）`, 
    formatter: (value, data) => `${value}（${data.contactTelephone}）`, 
  },
];

showFn属性变更 ​

在v1版本中可以使用showFn属性控制DataTable、DataForm、SearchForm等组件自定义按钮显示，在v2版本中改名为show。

ts
const buttons: DataTableButtons = [
  {
    name: '下载',
    showFn: data => data.canDownload, 
    show: data => data.canDownload, 
  },
];

分页组件data属性变更 ​

DataPagination组件在v1版本中需要通过data属性传入具体的分页数据，在v2版本中只需要传入数量总数total。

ts
<liv-data-pagination v-model="pageParam" :data="pageData" />
<liv-data-pagination v-model="pageParam" :total="pageData.total" />

const pageData = {
  records: [
    // ...
  ],
  total: 100,
  size: 10,
};
</script>

fieldData属性变更 ​

在v1版本中DataForm组件配置项需要动态加载属性时需要传入fieldData属性，在v2中改名为data属性。

ts
const data = [
  {
    label: '选项1',
    value: 1,
  },
  {
    label: '选项2',
    value: 2,
  },
];

const fields: DataFormFields = [
  {
    label: '选择器',
    prop: 'select',
    fieldType: 'select',
    fieldData: data, 
    data: data, 
  },
];

tagType属性变更 ​

在v1版本中，DataTable组件的tagType属性可以动态设置标签列的类型，在v2版本中改为type。

ts
const fields: DataTableFields = [
  {
    prop: 'status',
    label: '状态',
    fieldType: 'tag',
    tagType: (_row, _column, cellValue) => (cellValue === '1' ? 'primary' : 'warning'), 
    type: (_row, _column, cellValue) => (cellValue === '1' ? 'primary' : 'warning'), 
  },
];

网格选择器showLevel属性删除 ​

直接透传ElCascader组件的props.leaf属性即可实现相同功能，详见控制网格级别。

小数校验优化 ​

原matchDecimal1、matchDecimal2、matchDecimal3、matchDecimal4、validateDecimal1、validateDecimal2、validateDecimal3、validateDecimal4方法删除，新增matchDecimal、validateDecimal、createValidateDecimal方法，支持更加精细化的控制校验规则，详见小数校验。

动态表单写法 ​

在v1版本中可以通过传入响应式数据的方式实现动态表单功能，在v2版本中简化了动态表单的写法，可以直接通过字段配置项的watchEffect属性实现动态表单功能，详见动态表单。

注意

v1版本动态表单写法在v2版本仍然兼容，后续版本可能不再兼容该写法，请尽快修改为新的写法。

表格特殊列 ​

v1版本中表格列为按钮、开关等类型时使用起来较为繁琐，在v2版本中进行了针对性的优化，详见特殊表格列。

加密表单项2.1.0 ​

加解密表单项使用方式相较于v1版本更加简化，详见加密表单项。

视频播放器组件2.1.1 ​

新版视频播放器组件名称由LivMonitorPlayer变更为LivVideoPlayer，使用方法有所变更，支持更加灵活的播放配置，详见视频播放器。