Lingma file editing provides multi-file editing and tool-use capabilities. It helps developers complete coding tasks, such as implementing requirements, solving problems, generating unit test cases, and performing batch code modifications. This topic focuses on practical use cases in typical frontend development scenarios, such as text-to-code, image-to-code, importing self-developed frontend components, and refactoring self-developed frontend components.
Scenario 1: Import frontend components
In modern frontend development, developers often write or integrate User Interface (UI) components that follow enterprise design standards, such as buttons, forms, navigation bars, and modal dialogs. The traditional method is time-consuming and labor-intensive. Using a prompt-based method, you can quickly generate or import the required component code by providing a simple description, which greatly improves development efficiency.
1. Prepare the enterprise knowledge base
To obtain the best results from knowledge base retrieval augmentation, prepare the frontend component documents in your knowledge base according to the following requirements. For more information, see Knowledge Base Construction Guide and Retrieval Augmentation Guide.
Principles for preparing frontend component documents
Clear structure: Organize the document in a logical order. Include sections for the component title, basic usage and code examples, attributes, and events. Each section must have a clear heading.
Title and function overview: Use a clear title to describe the component name, such as
ColorPicker. Briefly describe the function and purpose of the component, such as "A component for color selection that supports multiple formats."Core usage:
For basic usage, provide a description and a code example that demonstrates the core function of the component.
For advanced features or complex use cases, provide additional code examples for those scenarios.
You can use subsections to introduce different advanced features of the component. Each feature module must have a code example and a brief description that demonstrates how to enable or use the specific feature.
Attributes: List all configurable attributes of the component in a table. Include the parameter name, description, data type, accepted values, and default value.
Events: List all events triggered by the component in a table. Include the event name, trigger condition, and callback parameters with their descriptions.
Code examples: Provide code implementation examples. For a specific example, see the following "ColorPicker" sample.
Document reference example
ColorPicker.md
## ColorPicker
Used for color selection. Supports multiple formats.
### Basic usage
:::demo Use v-model for bidirectional binding with a variable in the Vue instance. The bound variable must be a string.
```html
<div class="block">
With default value
<el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
Without default value
<el-color-picker v-model="color2"></el-color-picker>
</div>
<script>
export default {
data() {
return {
color1: '#409EFF',
color2: null
}
}
};
</script>
```
:::
### Select transparency
:::demo ColorPicker supports standard colors and colors with an alpha channel. Use the `show-alpha` property to control whether to support transparency selection.
```html
<el-color-picker v-model="color" show-alpha></el-color-picker>
<script>
export default {
data() {
return {
color: 'rgba(19, 206, 102, 0.8)'
}
}
};
</script>
```
:::
### Predefined colors
:::demo ColorPicker supports predefined colors.
```html
<el-color-picker
v-model="color"
show-alpha
:predefine="predefineColors">
</el-color-picker>
<script>
export default {
data() {
return {
color: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
'#c7158577'
]
}
}
};
</script>
```
:::
### Different sizes
:::demo
```html
<el-color-picker v-model="color"></el-color-picker>
<el-color-picker v-model="color" size="medium"></el-color-picker>
<el-color-picker v-model="color" size="small"></el-color-picker>
<el-color-picker v-model="color" size="mini"></el-color-picker>
<script>
export default {
data() {
return {
color: '#409EFF'
}
}
};
</script>
```
:::
### Attributes
| Parameter | Description | Type | Accepted values | Default value |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | Binding value | string | — | — |
| disabled | Specifies whether the component is disabled. | boolean | — | false |
| size | Size | string | medium / small / mini | — |
| show-alpha | Specifies whether to support transparency selection. | boolean | — | false |
| color-format | The color format of the value written to v-model. | string | hsl / hsv / hex / rgb | hex (if show-alpha is false) / rgb (if show-alpha is true) |
| popper-class | The class name of the ColorPicker dropdown. | string | — | — |
| predefine | Predefined colors | array | — | — |
### Events
| Event Name | Description | Callback Parameters |
|---------- |-------- |---------- |
| change | Triggered when the binding value changes. | Current value |
| active-change | Triggered when the currently displayed color on the panel changes. | The currently displayed color value |
2. Scenario demo: Code generation for a self-developed ColorPicker component
This demo uses the mall-admin-web open source project. We thank the developers of this open source project for their contributions.
Scenario 2: Replace and refactor frontend components
In modern frontend development, developers often need to refactor frontend components, such as replacing an old version with a new one. The traditional method requires you to find and manually replace components, which is time-consuming and labor-intensive. Using Lingma with prompts and a component document library, you can quickly replace components and improve refactoring efficiency.
1. Prepare the enterprise knowledge base
To obtain the best results from knowledge base retrieval augmentation, prepare the frontend component documents in your knowledge base according to the following requirements. For more information, see Knowledge Base Construction Guide and Retrieval Augmentation Guide.
Prompt example: Change the Table component from @alicloud/console-components to the CndTable from @ali/cnd. The following '@ali-cnd CndTable.md' is the document for the new component.
Document reference example
@ali-cnd CndTable.md
---
group:
title: Cloud-native business components
---
# @ali/cnd CndTable component
> If you use the refreshIndex property, the initial value should be 0. If you set it to a non-zero value, the fetchData function might be executed twice during the first load.
## Basic usage
```tsx preview
import React from 'react';
import { CndTable } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';
const Demo = () => {
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const fetchData = async params => {
console.log('params', params);
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
console.log(res);
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<CndTable
columns={columns}
fetchData={fetchData}
pagination={{
current: 1,
pageSize: 10,
total: 40,
}}
/>
);
};
export default Demo;
```
## operation && secondaryOperation
```tsx preview
import React from 'react';
import Table from '@ali/cnd-table';
import { Button } from '@alicloud/console-components';
import axios from 'axios';
import { get } from 'lodash';
import '@alicloud/console-components/dist/xconsole.css';
const Demo = () => {
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const fetchData = async params => {
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<Table
columns={columns}
fetchData={fetchData}
pagination={{
current: 1,
pageSize: 10,
total: 40,
}}
showRefreshButton
operation={<Button type="primary">Custom top-left button</Button>}
secondaryOperation={<Button>Custom top-right button</Button>}
/>
);
};
export default Demo;
```
## refreshIndex
```tsx preview
import React, { useState } from 'react';
import { CndTable, Button } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';
const Demo = () => {
const [refreshIndex, setRefreshIndex] = useState(0);
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const fetchData = async params => {
console.log('params', params);
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
console.log(res);
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<CndTable
columns={columns}
fetchData={fetchData}
refreshIndex={refreshIndex}
pagination={{
current: 1,
pageSize: 10,
total: 40,
}}
operation={
<Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
Manual refresh
</Button>
}
/>
);
};
export default Demo;
```
## showRefreshButton
```tsx preview
import React, { useState } from 'react';
import { CndTable, Button } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';
const Demo = () => {
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const fetchData = async params => {
console.log('params', params);
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
console.log(res);
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<CndTable
columns={columns}
fetchData={fetchData}
showRefreshButton
operation={<Button type="primary">Create Application</Button>}
/>
);
};
export default Demo;
```
## search
```tsx preview
import React, { useState } from 'react';
import { CndTable, Button } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';
const Demo = () => {
const [refreshIndex, setRefreshIndex] = useState(0);
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const search = {
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
options: [
{
label: 'Instance Name',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: 'Search by instance name',
},
},
{
label: 'Network Type',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: 'Select a network type',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
},
{
label: 'Billing Method',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: 'Select a billing method',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
},
],
};
const fetchData = async params => {
console.log('params', params);
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
console.log(res);
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<CndTable
columns={columns}
fetchData={fetchData}
refreshIndex={refreshIndex}
showRefreshButton
operation={
<Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
Manual refresh
</Button>
}
search={search}
/>
);
};
export default Demo;
```
## recordCurrent
```tsx preview
import React, { useState } from 'react';
import { CndTable, Button } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';
const Demo = () => {
const [refreshIndex, setRefreshIndex] = useState(0);
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const search = {
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
options: [
{
label: 'Instance Name',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: 'Search by instance name',
},
},
{
label: 'Network Type',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: 'Select a network type',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
},
{
label: 'Billing Method',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: 'Select a billing method',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
},
],
};
const fetchData = async params => {
console.log('params', params);
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
console.log(res);
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<CndTable
columns={columns}
fetchData={fetchData}
refreshIndex={refreshIndex}
recordCurrent
showRefreshButton
operation={
<Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
Manual refresh
</Button>
}
search={search}
/>
);
};
export default Demo;
```
## search children
```tsx preview
import React, { useState } from 'react';
import { CndTable, Button } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';
const Demo = () => {
const [refreshIndex, setRefreshIndex] = useState(0);
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const search = {
children: <Button>Custom content</Button>,
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
options: [
{
label: 'Instance Name',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: 'Search by instance name',
},
},
{
label: 'Network Type',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: 'Select a network type',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
},
{
label: 'Billing Method',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: 'Select a billing method',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
},
],
};
const fetchData = async params => {
console.log('params', params);
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
console.log(res);
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<CndTable
columns={columns}
fetchData={fetchData}
refreshIndex={refreshIndex}
recordCurrent
showRefreshButton
operation={
<Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
Manual refresh
</Button>
}
search={search}
/>
);
};
export default Demo;
```
## search default value
```tsx preview
import React, { useState } from 'react';
import { CndTable, Button } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';
const Demo = () => {
const [refreshIndex, setRefreshIndex] = useState(0);
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const search = {
children: <Button>Custom content</Button>,
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
options: [
{
label: 'Instance Name',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: 'Search by instance name',
},
defaultValue: 'abc',
},
{
label: 'Network Type',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: 'Select a network type',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: 'c',
},
{
label: 'Billing Method',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: 'Select a billing method',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: ['a', 'd'],
},
],
};
const fetchData = async params => {
console.log('params', params);
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
console.log(res);
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<CndTable
columns={columns}
fetchData={fetchData}
refreshIndex={refreshIndex}
recordCurrent
showRefreshButton
operation={
<Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
Manual refresh
</Button>
}
search={search}
/>
);
};
export default Demo;
```
## selection
```tsx preview
import React, { useState } from 'react';
import { CndTable, Button, Badge } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';
const Demo = () => {
const [refreshIndex, setRefreshIndex] = useState(0);
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const search = {
children: <Button>Custom content</Button>,
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
options: [
{
label: 'Instance Name',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: 'Search by instance name',
},
defaultValue: 'abc',
},
{
label: 'Network Type',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: 'Select a network type',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: 'c',
},
{
label: 'Billing Method',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: 'Select a billing method',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: ['a', 'd'],
},
],
};
const fetchData = async params => {
console.log('params', params);
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
console.log(res);
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<CndTable
className="cc"
style={{ color: '#333' }}
columns={columns}
fetchData={fetchData}
refreshIndex={refreshIndex}
recordCurrent
showRefreshButton
operation={
<Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
Manual refresh
</Button>
}
search={search}
primaryKey="InstanceId"
selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
return (
<Badge count={selectedRowKeys.length}>
<Button disabled={selectedRowKeys.length === 0}>Delete</Button>
</Badge>
);
}}
/>
);
};
export default Demo;
```
## onlySupportOne
```tsx preview
import React, { useState } from 'react';
import { CndTable, Button, Badge } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';
const Demo = () => {
const [refreshIndex, setRefreshIndex] = useState(0);
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const search = {
children: <Button>Custom content</Button>,
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
onlySupportOne: true,
options: [
{
label: 'Instance Name',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: 'Search by instance name',
},
defaultValue: 'abc',
},
{
label: 'Network Type',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: 'Select a network type',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: 'c',
},
{
label: 'Billing Method',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: 'Select a billing method',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: ['a', 'd'],
},
],
};
const fetchData = async params => {
console.log('params', params);
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
console.log(res);
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<CndTable
className="cc"
style={{ color: '#333' }}
columns={columns}
fetchData={fetchData}
refreshIndex={refreshIndex}
recordCurrent
showRefreshButton
operation={
<Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
Manual refresh
</Button>
}
search={search}
primaryKey="InstanceId"
selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
return (
<Badge count={selectedRowKeys.length}>
<Button disabled={selectedRowKeys.length === 0}>Delete</Button>
</Badge>
);
}}
/>
);
};
export default Demo;
```
## filterSlot
```tsx preview
import React, { useState } from 'react';
import { CndTable, Button, Badge } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';
const Demo = () => {
const [refreshIndex, setRefreshIndex] = useState(0);
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const search = {
children: <Button>Custom content</Button>,
beforeFilterRender: <Button>beforeFilterRender</Button>,
afterFilterRender: <Button>afterFilterRender</Button>,
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
onlySupportOne: true,
options: [
{
label: 'Instance Name',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: 'Search by instance name',
},
defaultValue: 'abc',
},
{
label: 'Network Type',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: 'Select a network type',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: 'c',
},
{
label: 'Billing Method',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: 'Select a billing method',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: ['a', 'd'],
},
],
};
const fetchData = async params => {
console.log('params', params);
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
console.log(res);
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<CndTable
className="cc"
style={{ color: '#333' }}
columns={columns}
fetchData={fetchData}
refreshIndex={refreshIndex}
recordCurrent
showRefreshButton
operation={
<Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
Manual refresh
</Button>
}
search={search}
primaryKey="InstanceId"
selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
return (
<Badge count={selectedRowKeys.length}>
<Button disabled={selectedRowKeys.length === 0}>Delete</Button>
</Badge>
);
}}
/>
);
};
export default Demo;
```
## pagination = false
```tsx preview
import React, { useState } from 'react';
import { CndTable, Button, Badge } from '@ali/cnd';
import axios from 'axios';
import { get } from 'lodash';
const Demo = () => {
const [refreshIndex, setRefreshIndex] = useState(0);
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
sortDirections: ['desc', 'asc', 'default', ],
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const search = {
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
onlySupportOne: true,
options: [
{
label: 'Instance Name',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: 'Search by instance name',
},
defaultValue: 'abc',
},
{
label: 'Network Type',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: 'Select a network type',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: 'c',
},
{
label: 'Billing Method',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: 'Select a billing method',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: ['a', 'd'],
},
],
};
const fetchData = async params => {
console.log('params', params);
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
console.log(res);
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<CndTable
className="cc"
style={{ color: '#333' }}
columns={columns}
fetchData={fetchData}
refreshIndex={refreshIndex}
recordCurrent
showRefreshButton
operation={
<Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
Manual refresh
</Button>
}
search={search}
pagination={false}
primaryKey="InstanceId"
selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
return (
<Badge count={selectedRowKeys.length}>
<Button disabled={selectedRowKeys.length === 0}>Delete</Button>
</Badge>
);
}}
/>
);
};
export default Demo;
```
## isShowLoading loop
```tsx preview
import React, { useState,useEffect} from 'react';
import Table from '@ali/cnd-table';
import axios from 'axios';
import { get } from 'lodash';
import { Button, Badge } from '@alicloud/console-components';
import '@alicloud/console-components/dist/xconsole.css';
const Demo = () => {
const [refreshIndex, setRefreshIndex] = useState(0);
const [isShowLoading, setIsShowLoading] = useState(true);
const [isLoop, setIsLoop] = useState(false);
useEffect(()=>{
setTimeout(()=>{
setIsLoop(true);
},10000)
setTimeout(()=>{
setIsLoop(false);
},60000)
},[])
const columns = [
{
key: 'InstanceName',
title: 'Instance Name',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP Address',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: 'Creation Time',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
sortDirections: ['desc', 'asc', 'default', ],
},
{
key: 'Status',
title: 'Status',
dataIndex: 'Status',
width: 300,
},
];
const search = {
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
onlySupportOne: true,
options: [
{
label: 'Instance Name',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: 'Search by instance name',
},
defaultValue: 'abc',
},
{
label: 'Network Type',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: 'Select a network type',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: 'c',
},
{
label: 'Billing Method',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: 'Select a billing method',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: ['a', 'd'],
},
],
};
const fetchData = async params => {
const res = await axios.get('https://oneapi.alibaba-inc.com/mock/cloud-native/request/DescribeInstances', {
params,
});
return {
data: get(res, 'data.data.Instances.Instance'),
total: get(res, 'data.data.TotalCount'),
};
};
return (
<Table
className="cc"
style={{ color: '#333' }}
columns={columns}
fetchData={fetchData}
refreshIndex={refreshIndex}
recordCurrent
showRefreshButton
operation={
<Button type="primary" onClick={() => setRefreshIndex(Date.now())}>
Manual refresh
</Button>
}
search={search}
pagination={false}
primaryKey="InstanceId"
selection={({ selectedRowKeys }: { selectedRowKeys: any[] }) => {
return (
<Badge count={selectedRowKeys.length}>
<Button disabled={selectedRowKeys.length === 0}>Delete</Button>
</Badge>
);
}}
isShowLoading={ isShowLoading }
loop={{enable: isLoop,time: 5000,showLoading:false}}
/>
);
};
export default Demo;
```
## API
> Inherits the API of the [@alicloud/console-components-table](https://xconsole.aliyun-inc.com/nexconsole/component_web/wyqgmh#/apis) component.
| Name | Type | Description | Default |
| ----------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------ |
| fetchData | (data: [IParams](#iparams)) => Promise<[IResult](#iresult)\> | The method for requesting the data source. Input parameters include search conditions and paging information. | - |
| refreshIndex | number | Triggers a refresh operation and re-requests fetchData. | 0 |
| recordCurrent | boolean | Takes effect only after refreshIndex is set. The default value is false. When refreshIndex is updated, the current page returns to the first page. If set to true, it stays on the current page. | false |
| showRefreshButton | boolean | Specifies whether to display the refresh button. | false |
| search | [IRcSearchProps](#ircsearchprops) | | - |
| columns | ColumnProps[] | The column description data object. It is an item in columns and inherits the API of Table.Column. | - |
|operation | ReactNode | Custom content in the upper-left corner. | - |
|secondaryOperation | ReactNode | Custom content in the upper-right corner. | - |
| isShowLoading | boolean | Specifies whether to display the loading animation during data refresh.<br />- This does not take effect when showRefreshButton is true and the built-in refresh button is used.<br />- After polling is enabled, whether to display the loading animation during data refresh in polling is determined by the showLoading setting in loop and is not controlled by this parameter.<br />- This only controls whether to display the loading animation during data refresh in a non-polling state. | true |
| loop | Object | Specifies whether to poll the API, the polling interval, and whether to display the loading animation during polling. | { enable: false, time: 10000, showLoading: false } |
|isUseStorage| boolean| Specifies whether to use the memory feature for the search bar and pager.| false |
|uniqueKey| string| Used with the isUseStorage field to identify the unique key of the table. By default, the keys of columns are concatenated with hyphens.| - |
|useLocalStorage| boolean| Used with the isUseStorage field. Specifies whether to use localStorage to store the current search bar and paging data. By default, sessionStorage is used.| false |
### IParams
```
interface IParams {
current?: number;
pageSize?: number;
[key: string]: any;
}
```
### IResult
```
interface IResult {
data: any[];
total?: number;
}
```
### IRcSearchProps
> Inherits the API of the [@alicloud/console-components-search](https://xconsole.aliyun-inc.com/nexconsole/modules/rc-search#api) component.
| Name | Type | Description | Default |
| ------------------------ | ----------------------- | -------------------------------------------------- | ------ |
| options | IRcSearchOptionsProps[] | The method for requesting the data source. Input parameters include search conditions and paging information. | - |
| placeholder | string | Default placeholder. | - |
| children | ReactNode | Custom content. | - |
| beforeFilterRender | ReactNode | Slot before the filter. | - |
| afterFilterRender | ReactNode | Slot after the filter. | - |
| onlySupportOne | boolean | Specifies whether to support only single selection. | - |
| defaultDataIndex | string | Default search category. | - |
| defaultSelectedDataIndex | string | Default selected category. | - |
### IRcSearchOptionsProps
| Name | Type | Description | Default |
| ------------- | ------ | ---------------------------------------------------------------------------------------------------------------- | ------ |
| label | string | The display name of the field. | - |
| dataIndex | string | The form key of the field. | - |
| defaultValue | any | Default value. | - |
| template | string | The field and the type of interactive component (input/select/multiple).<br />- input: search box<br />- select: single selection<br />- multiple: multiple selections | - |
| templateProps | any | Defines the properties passed to the form item, such as templateProps.placeholder and templateProps.dataSource. | - |
| groupName | string | Group. | - |
2. Scenario demo: Quick refactoring and replacement of a self-developed table component
Scenario 3: Text-to-code
Learn how to use Lingma file editing to quickly build a sales dashboard frontend page from scratch. You can simply enter your requirements or design ideas as a prompt. Lingma file editing automatically generates the frontend code. You can run the code directly and preview it in a browser, which provides a seamless transition from concept to presentation.
1. Scenario demo: Generating a sales dashboard frontend page
该文章对您有帮助吗？