cxs-ui

v0.3.1

Published

2 years ago

Vue 动态表格组件和动态表单组件

Downloads

0High
0Medium
0Low

chaoxiaoshu

前端 vue组件动态表格自定义表头 table 动态表单通用表单下拉列表 form select

安装

npm i cxs-ui -S

全局引用

在main.js中引入组件

import CxsUI from 'cxs-ui'
Vue.use(CxsUI)

组件

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

运行效果

自动生成表格的列和列头
示例图片1

可通过table-attr数据动态改变表格的列和列头
示例图片2

通过form-attr数据自动生成表单项
示例图片3

可自定义底部按钮
示例图片4

通过传入不同的column，动态改变表单的列
示例图片5

表格组件

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

table-data 表格数据

K,V键值对集合，键值对中的Key对应table-attr中的field。示例：

[
        { 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 分页配置

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

方法

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

示例

<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>

表单组件

<!--
  属性：
     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'
示例：

<cxs-form :column="column" :inline="true"></cxs-form>
...
data() {
  return {
    column: "1"
  }
}

form-attr

说明：表单项的数据
参数：

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 }

options
说明：下拉列表或单选/多选按钮的选项,只有type为select/radio/checkbox时才生效。
默认：[]
参数：
- value: 选项的值
- label: 选项的左边标签
- comment: 选项的右边标签（可选）示例：

{ 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
示例：

{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
示例：

{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
示例：

{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

<cxs-form @onSubmit="handleSubmit"></cxs-form>
..
methods: {
    handleSubmit(data) {
      
    }
}

插槽

自定义底部按钮

<cxs-form
    ...
>
<template v-slot:footer>
  <el-button @click="handleClick1">自定义按钮1</el-button>
  <el-button>自定义按钮2</el-button>
</template>
</cxs-form>

示例

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'}
]

下拉列表

<common-select
    :options="options"
    :value.sync="value"
    valuekey="value1"
    labelkey="label1"
    @change="selectChange">
</common-select>

属性

options

说明：下拉选项示例：

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'