File Editing Practice - Frontend Development

## ColorPicker 颜色选择器

用于颜色选择，支持多种格式。

### 基础用法

使用 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>
```

### 选择透明度

ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过 `show-alpha` 属性即可控制是否支持透明度的选择。

```html
<el-color-picker v-model="color" show-alpha></el-color-picker>
```

### 预定义颜色

ColorPicker 支持预定义颜色。

```html
<el-color-picker
  v-model="color"
  show-alpha
  :predefine="predefineColors">
</el-color-picker>
```

### 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 / rgb |
| popper-class | ColorPicker 下拉框的类名 | string | — | — |
| predefine | 预定义颜色 | array | — | — |

### Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 当绑定值变化时触发 | 当前值 |
| active-change | 面板中当前显示的颜色发生改变时触发 | 当前显示的颜色值 |

#  @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 => {
    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 (
    <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';

const Demo =  => {
  // ...columns 与 fetchData 同上
  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 / showRefreshButton / search / selection 等

> 以上属性可组合使用，用于手动刷新、搜索栏、行选择、轮询等场景，具体用法参见组件源码示例。

## API

> 继承 @alicloud/console-components-table 组件的 API

| 名称 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| fetchData | (data: IParams) => Promise<IResult> | 请求数据源的方法, 入参包含搜索条件和分页信息等 | - |
| refreshIndex | number | 触发刷新操作，重新请求 fetchData | 0 |
| recordCurrent | boolean | refreshIndex 更新后是否停留在当前页 | false |
| showRefreshButton | boolean | 是否显示刷新按钮 | false |
| search | IRcSearchProps | 搜索栏配置 | - |
| columns | ColumnProps[] | 列描述数据对象 | - |
| operation | ReactNode | 自定义左上角内容 | - |
| secondaryOperation | ReactNode | 自定义右上角内容 | - |
| isShowLoading | boolean | 数据刷新时是否需要展示 loading | true |
| loop | Object | 接口是否轮询，以及轮询时间设置 | { enable: false, time: 10000, showLoading: false } |

### IParams

```
interface IParams {
  current?: number;
  pageSize?: number;
  [key: string]: any;
}
```

### IResult

```
interface IResult {
  data: any[];
  total?: number;
}
```