# cxs-ui

**Repository Path**: cxshu/cxs-ui

## Basic Information

- **Project Name**: cxs-ui
- **Description**: vue动态表格组件，动态表头
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2022-07-03
- **Last Updated**: 2023-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue组件, 动态表格, 自定义表头, Vue, table

## README

<h1 style="text-align: center;font-size: 60px">cxs-ui</h1>
<p style="text-align: center">
  <a href="https://www.npmjs.com/package/cxs-ui">
    <img src="https://img.shields.io/npm/v/cxs-ui?color=blue">
  </a>
  <a href="LICENSE">
    <img src="https://img.shields.io/badge/License-MIT-yellow.svg">
  </a>
  <a href="https://www.npmjs.com/package/cxs-ui">
    <img src="https://img.shields.io/npm/dw/cxs-ui?label=%E4%B8%8B%E8%BD%BD%E9%87%8F">
  </a>

  <a href="https://www.npmjs.com/package/cxs-ui">
    <img src="https://img.shields.io/bundlephobia/min/cxs-ui?label=Size">
  </a>

  <a href="https://www.npmjs.com/package/cxs-ui">
    <img src="https://img.shields.io/npm/dependency-version/cxs-ui/element-ui?color=green">
  </a>
 
</p>


## 安装
```vue
npm i cxs-ui -S
```

## 全局引用
在main.js中引入组件
```vue
import CxsUI from 'cxs-ui'
Vue.use(CxsUI)
```

## 组件
cxs-table 表格组件   
cxs-form 表单组件  
cxs-select下拉列表  



## 运行效果
自动生成表格的列和列头  
![示例图片1](https://gitee.com/cxshu/cxs-table/raw/master/screen-shot/img.gif)

可通过table-attr数据动态改变表格的列和列头  
![示例图片2](https://gitee.com/cxshu/cxs-table/raw/master/screen-shot/img_3.gif)

通过form-attr数据自动生成表单项  
![示例图片3](https://gitee.com/cxshu/cxs-table/raw/master/screen-shot/img_1.png)

可自定义底部按钮  
![示例图片4](https://gitee.com/cxshu/cxs-table/raw/master/screen-shot/img_3.png)

通过传入不同的column，动态改变表单的列  
![示例图片5](https://gitee.com/cxshu/cxs-table/raw/master/screen-shot/img_2.gif)


# 表格组件
```vue
<!--
      属性：
        selectable: 是否展示选择框
        table-attr： 表格属性
        table-data: 表格数据
        page: 分页配置
        show-view: 是否在操作列显示默认的view按钮
        show-edit： 是否在操作列显示默认的edit按钮
        show-delete： 是否在操作列显示默认的delete按钮
      方法：
        viewClick: 点击编辑按钮的回调
        editClick: 点击编辑查看的回调
        deleteClick: 点击删除按钮的回调
        handleSearch: 点击查询按钮的回调
        pagerChange: 分页的当前页面和每页显示条数改变时的回调
      插槽:
        默认插槽: 自定义列
        handle插槽: 可自定义操作列的按钮
    -->
<cxs-table
    :selectable=true
    :table-attr="tableAttr"
    :table-data="tableData"
    :page="pageOption"
    :show-view="false"
    :show-edit="true"
    :show-delete="true"
    @editClick="showEdit"
    @deleteClick="row => confirm(() => delHandle(row.id))"
    @handleSearch="searchHandle"
    @selectionChange="handleSelectionChange"
    @pagerChange="pagerChange"
>
<template v-slot:handle="scope">
  <el-button size="small" type="text" @click="roleHandle(scope.row.id)" v-if="hasAuth('sys:user:role')">分配角色</el-button>
  <el-divider direction="vertical"></el-divider>
  <el-button size="small" type="text" @click="repassHandle(scope.row.id, scope.row.username)"
             v-if="hasAuth('sys:user:repass')">重置密码</el-button>
</template>
</cxs-table>
```

## 属性
### table-attr 列属性

| 名称 | 说明 | 可选值 | 默认值 |
|:---:|:---:|---|:---:|
| type | 列类型 | string类型，可选值：<br>&emsp;default：普通列<br>&emsp;avatar：头像列<br>&emsp;tag：标签列<br>&emsp;handle：操作列 | default |
| field | 列名称 | string类型。<br>例：name,username等。 |  |
| label | 列标题 | string类型。<br>例：姓名，用户名等 |  |
| width | 列宽 | string类型。例：100 |  |
| header | 列头类型 | string类型，可选值：<br>&emsp;input：输入框，<br>  &emsp;select：下拉列表，<br>  &emsp;daterange：日期范围选择框，<br>  &emsp;search：查询按钮 | input |
| options | 下拉列表 | Array类型，当header为select时生效。例：<br>options: [<br>  &emsp;{value: '0', label: '禁用', type: 'danger'},<br>  &emsp;{value: '1', label: '正常', type: 'success'},<br>] |  |
| children | 嵌套列 | Array对象，里面的每个元素都是一个table-attr对象。例：<br>children: [<br>  &emsp;{field: 'income', label: '收入', sortable: true, width: 80},<br>  &emsp;{field: 'expend', label: '支出', sortable: true, width: 80}<br>] |  |
| handle | 操作列 | Object类型，当type为handle时生效。例：<br>handle: {<br>  &emsp;view: {label: '查看'},<br>  &emsp;edit: { label: '编辑', type: 'text', size: 'small'},<br>  &emsp;delete: { label: '删除'}<br>} |  |
  

### table-data 表格数据    
K,V键值对集合，键值对中的Key对应table-attr中的field。
示例：
```vue
[
        { id: 1, name: '张三', username: 'admin', phone: '18709581727', avatar: '/favicon.ico', status: 0},
        { id: 2, name: '李四', username: 'lisi',status: 1,
          income: 2311.67, expend: 833.01,
          roles: [1, 2],
          // view/edit/delete为false时禁用该行的相应按钮，默认为true
          handle: {view: false, edit: false}
        }
      ]
```

### page 分页配置
```vue
page = {
    current: 1,  // 当前页面
    size: 10,   // 当前页条数
    total: 11,  // 总条数
    sizes: [10, 20, 50, 100]  // 
}
```


## 方法
viewClick 点击查看  
editClick 点击编辑  
deleteClick 点击删除  
selectionChange 表格选择项发生变化  
handleSearch 点击查询按钮  
pagerChange 分页改变后的回调

## 示例
```vue
<template>
  <div class="hello">
    <cxs-table
        :selectable=true
        :table-data="tableData"
        :table-attr="tableAttr"
        :page="pageOption"   
        :show-view="false"
        :show-edit="true"
        :show-delete="true"
        @editClick="showEdit"
        @deleteClick="row => confirm(() => delHandle(row.id))"
        @handleSearch="searchHandle"
        @selectionChange="handleSelectionChange"
        @pagerChange="pagerChange"
    ></cxs-table>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      tableData: [
        { id: 1, name: '张三', username: 'zhangsan', phone: '18709581727', avatar: '/favicon.ico', status: '0',
          income: 231.67, expend: 6543.00,
          roles: [1, 2],
          createTime: '2022-06-08T21:35:33'
        },
        { id: 2, name: '李四', username: 'lisi', phone: '18709581727', avatar: '/favicon.ico', status: '1',
          income: 2311.67, expend: 833.01,
          roles: [2],
          createTime: '2022-06-08T21:35:33',
          // view/edit/delete为false时禁用该行按钮，默认为true
          handle: {view: false, edit: false}
        }
      ],
      tableAttr: [
        {type: 'avatar', field: 'avatar', label: '头像', width: '50'},
        {field: 'name', label: '姓名', width: '120', header: 'input'},
        {field: 'username', label: '用户名', header: 'input'},
        {label: '金额',
          children: [
            {field: 'income', label: '收入', sortable: true, width: 80},
            {field: 'expend', label: '支出', sortable: true, width: 80}
          ]
        },
        {type: 'tags', field: 'roles', label: '角色', header: 'select',
          options: [
            {value: '1', label: '超级管理员'},
            {value: '2', label: '管理员'},
          ]
        },
        {field: 'phone', label: '手机号', sortable: true, header: 'input'},
        {type: 'tag', field: 'status', label: '状态', header: 'select',
          options: [
            {value: '0', label: '禁用', type: 'danger'},
            {value: '1', label: '正常', type: 'success'},
          ]
        },
        {field: 'createTime', label: '创建时间', header: 'daterange', width: 250},
        {type: 'handle', field: 'handle', label: '操作', fixed: 'right', header: 'search', width: 140,
          handle: {
            edit: { label: '编辑', type: 'text', size: 'small'},
            delete: { label: '删除'}
          }
        }
      ]
    }
  },
  methods: {
    searchHandler(data) {
      console.log(data)
    },
    viewClick(data) {
      console.log(data)
    }
  }
}
</script>

```

# 表单组件
```vue
<!--
  属性：
     width: 表单的宽度
     title:标题
     column: 表单项的列数，控制表单的组件显示成1列或N列，inline为true时才生效。
     form-attr: 表单属性
     show:显示/隐藏表单
     item-width: 表单项宽度
     data:表单回显数据
     inline:让表单域变为行内的表单域. true: 行内表单，false: 非行内表单
  方法：   
     onSubmit:点击默认的提交按钮的回调
 -->
<cxs-form width="900"
    title="用户"
    column="2"
    :form-attr="formAttr"
    :show.sync="dialogVisible"
    :data="formData"
    :inline="false"
    @onSubmit="submit"
>
</cxs-form>
```
## 属性
### width
  说明：表单的宽度  
  默认：'600'  
  示例：`<cxs-form width="900"></cxs-form>`

### title  
  说明：表单的标题后半部分，当传入的data对象有id时，标题为'编辑'+title，没有id时标题为'新增'+title  
  默认：''  
  示例：`<cxs-form title="用户"></cxs-form>`

### column  
  说明：指定表单显示成几列，inline为true时才会生效。  
  默认：'1'  
  示例：
```vue
<cxs-form :column="column" :inline="true"></cxs-form>
...
data() {
  return {
    column: "1"
  }
}
```

### form-attr
&ensp;说明：表单项的数据  
&ensp;参数：  

  * **field**  
  说明：表单项名称  
  示例：
```
{ field: 'name' },
{ field: 'username' },
```

  * **label**  
  说明：表单项标题  
  示例：
```
{ field: 'name', label: '姓名' },
{ field: 'username', label: '用户名' }
```

  * **type**  
  说明：表单项类型  
  默认：input  
  可选值： input, select, radio, date, checkbox, switch, password  
  示例：
```
{ field: 'name', label: '姓名', type: 'input'},
{ field: 'status', label: '状态', type: 'radio'},
{ field: 'createDate', label: '日期', type: 'date'}
```

  * **rules**  
    说明：表单项验证规则  
    默认：{}  
    示例：  
```
{ field: 'name', label: '姓名', type: 'input', 
    rules: [
        { required: true, message: '姓名不能为空' }
    ]
},
```

  * **disabled**   
  说明：禁用表单项   
  默认：`false`  
  示例：`{ field: 'name', type: 'input', disabled: true }`  
</br>

  * **options**  
   说明：下拉列表或单选/多选按钮的选项,只有type为select/radio/checkbox时才生效。  
   默认：[]   
   参数： 
    * value: 选项的值
    * label: 选项的左边标签
    * comment:  选项的右边标签（可选）
   示例：
```vue
{ field: 'type', label: '类型', type: 'select',
    options: [
        { value: 0, label: 'default', comment: '默认'},
        { value: 1, label: 'avatar', comment: '头像'},
        { value: 2, label: 'select', comment: '列表'}
    ]
}
```


  * **valuekey**  
   说明：当表单类型为select/radio/checkbox时，指定选项的value的key  
   默认：`value`    
   示例：
```vue
{field: 'type', label: '类型', type: 'select',  valuekey: 'value1',
    options: [
        { value1: 0, label: 'default' },
        { value1: 1, label: 'avatar' },
        { value1: 2, label: 'select' }
    ]
}
```

  * **labelkey**  
   说明：当表单类型为select/radio/checkbox时，指定选项的label的key  
   默认：`label`  
   示例：  
```vue
{field: 'type', label: '类型', type: 'select', labelkey: 'title',
    options: [
        { value: 0, title: 'default'},
        { value: 1, title: 'avatar'},
        { value: 2, title: 'select'}
    ]
}
```

  * **commentkey**  
    说明：当表单类型为select时，指定选项的comment的key  
    默认：`label`  
    示例：  
```vue
{field: 'type', label: '类型', type: 'select', commentkey: 'information',
    options: [
        { value: 0, label: 'default', information: '默认'},
        { value: 1, label: 'avatar', information: '头像'},
        { value: 2, label: 'select', information: '列表'}
    ]
}
```


## 方法
* **onSubmit**   
 说明：点击提交后的回调，返回data
```vue
<cxs-form @onSubmit="handleSubmit"></cxs-form>
..
methods: {
    handleSubmit(data) {
      
    }
}
```

## 插槽
### 自定义底部按钮
```vue
<cxs-form
    ...
>
<template v-slot:footer>
  <el-button @click="handleClick1">自定义按钮1</el-button>
  <el-button>自定义按钮2</el-button>
</template>
</cxs-form>
```

## 示例
```vue
formData: {status: 1, type: 0, roles: [1], date: '2022-1-1' },
formAttr: [ 
    { field: 'name', label: '姓名', type: 'input', rules: [{required: true, message: '姓名不能为空'}]},
    { field: 'username', label: '用户名', type: 'input', rules: [{required: true, message: '用户名不能为空'}]},
    { field: 'phone', label: '手机号', type: 'input', disabled: true},
    { field: 'roles', label: '角色', type: 'checkbox'},
    {
        field: 'status', label: '状态', type: 'radio',
        options: [
            {value: 0, label: '禁用'},
            {value: 1, label: '正常'}
        ]
    },
    {field: 'type', label: '类型', type: 'select',
        options: [
            {value: 0, label: 'default', comment: '默认'},
            {value: 1, label: 'avatar', comment: '头像'},
            {value: 2, label: 'select', comment: '列表'},
            {value: 3, label: 'handle', comment: '操作'}
        ]
    },
    {field: 'date', label: '日期', type: 'date'}
]
```

# 下拉列表
```vue
<common-select
    :options="options"
    :value.sync="value"
    valuekey="value1"
    labelkey="label1"
    @change="selectChange">
</common-select>
```

## 属性
### options
说明：下拉选项
示例：
```vue
options: [
    { value1: '1', label1: '黄金糕', comment: '黄金糕' },
    { value1: '2', label1: '双皮奶', comment: '双皮奶' },
    { value1: '3', label1: '蚵仔煎', comment: '' },
    { value1: '4', label1: '龙须面', comment: '' },
    { value1: '5', label1: '北京烤鸭', comment: '' }
  ]
```

### valuekey
说明：指定value的key
默认：'value'

### labelkey
说明：指定label的key
默认：'label'

### commentkey
说明：指定comment的key
默认：'comment'