@tuoyuan/web-plus-dev/README.md

基于arco-design的配置化表格表单组件

## arco @tuoyuan/web-plus高阶组件库



###  安装

pnpm

```
pnpm add @tuoyuan/web-plus
```

npm

```sh
npm install @tuoyuan/web-plus
```

yarn

```sh
yarn add @tuoyuan/web-plus
```



### 引入

``` ts
import tyWebPlus from "@tuoyuan/web-plus"
import "@tuoyuan/web-plus/ui/es/style.css"

app.use(tyWebPlus)
```

> 安装 plus组件之前，应先全量引入arco组件和样式

``` ts
import ArcoVue from '@arco-design/web-vue';
import '@arco-design/web-vue/dist/arco.css';
```

#### 如果需要图标，请安装


``` ts
import ArcoVueIcon from '@arco-design/web-vue/es/icon';
app.use(ArcoVueIcon);
```

### form
```ts
const form=ref({
    name:"张三",
    age:18
})
const option=reactive<Option>({
    columns:[
        {
            label:"姓名",
            field:"name",
        },
        {
            label:"年龄",
            field:"age",
            type:"input"
        }
    ]
})
```

ts 类型支持

```ts
import type {Option} from "@tuoyuan/web-plus"
```
### table
```vue
<div>
    <a-table-plus v-model="form" v-model:page="page" :option="option" :data="data"> </a-table-plus>
  </div>
```

```ts
import type {TableOption} from "@tuoyuan/web-plus"
const page=reactive({
    pageSize:10,
    currentPage:1,
    total:10,
})
const form=ref({})
const data=[
    {
        name: '李四',
        age: 20,
        sex: '女'
    },
    {
        name: '王五',
        age: 22,
        sex: '男'
    },
    {
        name: '赵六',
        age: 24,
        sex: '女'
    },
]
const option:TableOption={
    columns:[
        {
            label:'姓名',
            field:'name'
        },
        {
            label:'年龄',
            field:'age',
            search:true,
        },
        {
            label:'性别',
            field:'sex'
        }
    ]
}
```
ts 类型支持
```ts
import type {tableOption} from "@tuoyuan/web-plus"
```