AI 程序员前端使用实践
更新时间：2025-03-21 15:08:21
通义灵码 AI 程序员，具备多文件代码修改（Multi-file Edit）和工具使用（Tool-use）的能力，可以与开发者协同完成编码任务，如需求实现、问题解决、单元测试用例生成、批量代码修改等。本文聚焦于前端研发中的典型场景，例如文生代码、图生代码、前端自研组件的引入、前端自研组件的代码重构等核心场景使用实践。
场景1：前端组件引入
在现代前端开发中，开发者需要反复编写或集成符合企业设计规范的UI组件，如按钮、表单、导航栏和模态框。传统方式耗时费力，而基于提示词的方法通过简单描述即可快速生成或引入所需组件代码，大幅提升开发效率。
1.企业知识库准备
为了使知识库检索增强技术发挥最佳效果，在知识库文档准备方面，针对前端组件类文档有以下要求，更多信息可参考知识库构建指南和检索增强指南。
前端组件文档准备原则
结构清晰：应按逻辑顺序组织，分为组件标题名称、基础用法与代码示例、属性、事件等，每个模块需有清晰标题。
标题与功能概述：使用清晰的标题（如
ColorPicker 颜色选择器）描述组件名称，简要说明组件的功能和用途（如“用于颜色选择，支持多种格式”）。核心用法：
针对基础用法，提供说明和使用组件的代码示例，展示组件的核心功能。
如果有高级功能或者复杂用法，还需额外提供该场景下的代码示例。
可以通过子章节的格式，分别介绍组件的不同高级功能，每个功能模块需提供代码示例和简要说明，展示如何启用特定功能或具体用法。
属性（Attributes）：以表格形式列出组件的所有可配置属性，包括参数名称、功能说明、数据类型、可选值范围和默认值。
事件（Events）：以表格形式列出组件触发的所有事件，包括事件名称、触发条件或时机、回调参数及其含义。
代码示例：提供代码实现示例即可。具体可参考以下《ColorPicker》示例。
文档参考示例
ColorPicker.md
## ColorPicker 颜色选择器
用于颜色选择，支持多种格式。
### 基础用法
:::demo 使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。
```html
<div class="block">
<span class="demonstration">有默认值</span>
<el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
<span class="demonstration">无默认值</span>
<el-color-picker v-model="color2"></el-color-picker>
</div>
<script>
export default {
data() {
return {
color1: '#409EFF',
color2: null
}
}
};
</script>
```
:::
### 选择透明度
:::demo ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过`show-alpha`属性即可控制是否支持透明度的选择。
```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>
```
:::
### 预定义颜色
:::demo ColorPicker 支持预定义颜色
```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>
```
:::
### 不同尺寸
:::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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
| value / v-model | 绑定值 | string | — | — |
| disabled | 是否禁用 | boolean | — | false |
| size | 尺寸 | string | medium / small / mini | — |
| show-alpha | 是否支持透明度选择 | boolean | — | false |
| color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） |
| popper-class | ColorPicker 下拉框的类名 | string | — | — |
| predefine | 预定义颜色 | array | — | — |
### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 当绑定值变化时触发 | 当前值 |
| active-change | 面板中当前显示的颜色发生改变时触发 | 当前显示的颜色值 |
2.场景演示：《自研组件ColorPicker的代码生成》
本演示中使用了 mall-admin-web 开源项目，特此感谢项目开发者对开源的贡献。
AI 程序员前端使用实践
场景2：前端组件替换与重构
在现代前端开发中，开发者常需重构前端组件，如用新版替换旧版。传统方法需查找和手动替换组件，耗时费力。而使用通义灵码，通过提示词和组件文档库，可快速完成组件替换，提高重构效率。
1.企业知识库准备
为了使知识库检索增强技术发挥最佳效果，在知识库文档准备方面，针对前端组件类文档有以下要求，更多信息可参考知识库构建指南和检索增强指南。
提示词示例：这个 Table 组件是@alicloud/console-components，帮我改成@ali/cnd的CndTable。以下《@ali-cnd CndTable.md》为更改后的示例。
文档参考示例
@ali-cnd CndTable.md
---
group:
title: 云原生业务组件
---
# @ali/cnd CndTable 表格组件
> 如果使用 refreshIndex 属性，初始值应设置为 0，设置为非 0 时, 第一次加载时可能造成 fetchData 函数执行两次
## 基本使用
```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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: '状态',
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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: '状态',
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">自定义左上角按钮</Button>}
secondaryOperation={<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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: '状态',
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())}>
手动刷新
</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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: '状态',
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">创建应用</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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: '状态',
dataIndex: 'Status',
width: 300,
},
];
const search = {
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
options: [
{
label: '实例名称',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: '按实例名称搜索',
},
},
{
label: '网络类型',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: '请选择网络类型',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
},
{
label: '付费类型',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: '请选择付费类型',
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())}>
手动刷新
</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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: '状态',
dataIndex: 'Status',
width: 300,
},
];
const search = {
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
options: [
{
label: '实例名称',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: '按实例名称搜索',
},
},
{
label: '网络类型',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: '请选择网络类型',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
},
{
label: '付费类型',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: '请选择付费类型',
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())}>
手动刷新
</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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: '状态',
dataIndex: 'Status',
width: 300,
},
];
const search = {
children: <Button>自定义内容</Button>,
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
options: [
{
label: '实例名称',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: '按实例名称搜索',
},
},
{
label: '网络类型',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: '请选择网络类型',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
},
{
label: '付费类型',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: '请选择付费类型',
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())}>
手动刷新
</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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: '状态',
dataIndex: 'Status',
width: 300,
},
];
const search = {
children: <Button>自定义内容</Button>,
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
options: [
{
label: '实例名称',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: '按实例名称搜索',
},
defaultValue: 'abc',
},
{
label: '网络类型',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: '请选择网络类型',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: 'c',
},
{
label: '付费类型',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: '请选择付费类型',
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())}>
手动刷新
</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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: '状态',
dataIndex: 'Status',
width: 300,
},
];
const search = {
children: <Button>自定义内容</Button>,
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
options: [
{
label: '实例名称',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: '按实例名称搜索',
},
defaultValue: 'abc',
},
{
label: '网络类型',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: '请选择网络类型',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: 'c',
},
{
label: '付费类型',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: '请选择付费类型',
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())}>
手动刷新
</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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: '状态',
dataIndex: 'Status',
width: 300,
},
];
const search = {
children: <Button>自定义内容</Button>,
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
onlySupportOne: true,
options: [
{
label: '实例名称',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: '按实例名称搜索',
},
defaultValue: 'abc',
},
{
label: '网络类型',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: '请选择网络类型',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: 'c',
},
{
label: '付费类型',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: '请选择付费类型',
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())}>
手动刷新
</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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
},
{
key: 'Status',
title: '状态',
dataIndex: 'Status',
width: 300,
},
];
const search = {
children: <Button>自定义内容</Button>,
beforeFilterRender: <Button>beforeFilterRender</Button>,
afterFilterRender: <Button>afterFilterRender</Button>,
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
onlySupportOne: true,
options: [
{
label: '实例名称',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: '按实例名称搜索',
},
defaultValue: 'abc',
},
{
label: '网络类型',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: '请选择网络类型',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: 'c',
},
{
label: '付费类型',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: '请选择付费类型',
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())}>
手动刷新
</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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
sortDirections: ['desc', 'asc', 'default', ],
},
{
key: 'Status',
title: '状态',
dataIndex: 'Status',
width: 300,
},
];
const search = {
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
onlySupportOne: true,
options: [
{
label: '实例名称',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: '按实例名称搜索',
},
defaultValue: 'abc',
},
{
label: '网络类型',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: '请选择网络类型',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: 'c',
},
{
label: '付费类型',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: '请选择付费类型',
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())}>
手动刷新
</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: '实例名称',
dataIndex: 'InstanceName',
width: 300,
},
{
key: 'Address',
title: 'IP地址',
dataIndex: 'Address',
width: 300,
},
{
key: 'CreationTime',
title: '创建时间',
width: 300,
dataIndex: 'CreationTime',
sortable: true,
sortDirections: ['desc', 'asc', 'default', ],
},
{
key: 'Status',
title: '状态',
dataIndex: 'Status',
width: 300,
},
];
const search = {
defaultDataIndex: 'name',
defaultSelectedDataIndex: 'name',
onlySupportOne: true,
options: [
{
label: '实例名称',
dataIndex: 'name',
template: 'input',
templateProps: {
placeholder: '按实例名称搜索',
},
defaultValue: 'abc',
},
{
label: '网络类型',
dataIndex: 'type',
template: 'select',
templateProps: {
placeholder: '请选择网络类型',
dataSource: [
{ label: 'A', value: 'a' },
{ label: 'B', value: 'b' },
{ label: 'C', value: 'c' },
{ label: 'D', value: 'd' },
],
},
defaultValue: 'c',
},
{
label: '付费类型',
dataIndex: 'pay',
template: 'multiple',
templateProps: {
placeholder: '请选择付费类型',
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())}>
手动刷新
</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
> 继承 [@alicloud/console-components-table](https://xconsole.aliyun-inc.com/nexconsole/component_web/wyqgmh#/apis) 组件的 API
| 名称 | 类型 | 说明 | 默认值 |
| ----------------- | ------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------- | ------ |
| fetchData | (data: [IParams](#iparams)) => Promise<[IResult](#iresult)\> | 请求数据源的方法, 入参信息包含搜索条件和分页信息等 | - |
| refreshIndex | number | 触发刷新操作,重新请求fetchData | 0 |
| recordCurrent | boolean | 仅 refreshIndex 设置后生效，默认为false， refreshIndex 更新后，当前页会到第一页，设置为true后，停留在当前页 | false |
| showRefreshButton | boolean | 是否显示刷新按钮 | false |
| search | [IRcSearchProps](#ircsearchprops) | | - |
| columns | ColumnProps[] | 列描述数据对象，是 columns 中的一项，继承Table.Column的 API | - |
|operation | ReactNode | 自定义左上角内容 | - |
|secondaryOperation | ReactNode | 自定义右上角内容 | - |
| isShowLoading | boolean | 数据刷新时是否需要展示loading <br />- showRefreshButton为true，使用table内置刷新按钮时不生效<br />- 开启轮询后，轮询中数据刷新时loading是否展示根据loop中showLoading设置，不受该参数控制<br />- 仅控制非轮询状态下数据刷新时loading是否展示 | true |
| loop | Object | 接口是否轮询，以及轮询时间设置，轮询时是否展示loading | { enable: false, time: 10000, showLoading: false } |
|isUseStorage| boolean| 是否使用搜索栏和分页器的记忆能力| false |
|uniqueKey| string| 配合 isUseStorage 字段使用，标识 table 对应的唯一 key，默认取 columns 的 key 以 - 拼接而成| - |
|useLocalStorage| boolean| 配合 isUseStorage 字段使用，是否使用localStorge存储当前搜索栏和分页数据，默认使用sessionStorage| false |
### IParams
```
interface IParams {
current?: number;
pageSize?: number;
[key: string]: any;
}
```
### IResult
```
interface IResult {
data: any[];
total?: number;
}
```
### IRcSearchProps
> 继承 [@alicloud/console-components-search](https://xconsole.aliyun-inc.com/nexconsole/modules/rc-search#api) 组件的 API
| 名称 | 类型 | 说明 | 默认值 |
| ------------------------ | ----------------------- | -------------------------------------------------- | ------ |
| options | IRcSearchOptionsProps[] | 请求数据源的方法, 入参信息包含搜索条件和分页信息等 | - |
| placeholder | string | 默认placeholder | - |
| children | ReactNode | 自定义内容 | - |
| beforeFilterRender | ReactNode | filter 之前的 插槽 | - |
| afterFilterRender | ReactNode | filter 之后的 插槽 | - |
| onlySupportOne | boolean | 是否仅支持单选 | - |
| defaultDataIndex | string | 默认搜索类别 | - |
| defaultSelectedDataIndex | string | 默认选中的类别 | - |
### IRcSearchOptionsProps
| 名称 | 类型 | 说明 | 默认值 |
| ------------- | ------ | ---------------------------------------------------------------------------------------------------------------- | ------ |
| label | string | 字段展示名称 | - |
| dataIndex | string | 字段表单key | - |
| defaultValue | any | 默认值 | - |
| template | string | 字段，交互组件类型（input/select/multiple）<br />- input：搜索框<br />- select：单选<br />- multiple：多选<br /> | - |
| templateProps | any | 定义传给表单项的属性 templateProps.placeholder templateProps.dataSource | - |
| groupName | string | 分组 | - |
2.场景演示：《自研table组件的快速重构与替换》
AI 程序员前端使用实践
场景3：文生代码
体验如何使用通义灵码 AI 程序员，从零开始快速构建销售大盘前端页面。只需输入需求或设计思路作为提示词，通义灵码 AI 程序员即可自动生成前端代码，您可以直接运行并在浏览器中预览，实现从构思到展示的无缝对接。
1.场景演示：《销售大盘前端页面生成》
AI 程序员前端使用实践
该文章对您有帮助吗？
- 本页导读
- 场景1：前端组件引入
- 1.企业知识库准备
- 2.场景演示：《自研组件ColorPicker的代码生成》
- 场景2：前端组件替换与重构
- 1.企业知识库准备
- 2.场景演示：《自研table组件的快速重构与替换》
- 场景3：文生代码
- 1.场景演示：《销售大盘前端页面生成》