Vue

Vue相关 emmm不知道为嘛不能格式化代码，等我研究好了再格式化吧o(╥﹏╥)o

更新几个自己简单封装的组件，基于Element-UI

Form-Table-Pagination

用下面三个组件组合成一个组件，不影响其他三个组件单独使用

使用

直接复制代码到项目中，然后导入，即可使用

示例：

import FormTablePagination from '@/components/FormTablePagination'
<template>
    <form-table-pagination :config="config"></form-table-pagination>
</template>
<script>
    export default {
        components: {
            FormTablePagination
        }
    }
</script>

参数说明

config 为组件配置对象，具体配置如下：

config参数配置

表格

使用

直接复制代码到项目中，然后导入，即可使用

示例：

import CustomTable from '@/components/CustomTable'
<template>
    <custom-talbe :tableOptions="tableOptions"></custom-table>
</template>
<script>
    export default {
        components: {
            CustomTable
        }
    }
</script>

参数说明

tableOptions 为组件配置对象，详细配置如下：

table参数配置

columns参数配置

表格操作栏 如需在每一行单独增加操作按钮，需要在组件内使用插槽 示例：

<custom-table :tableOptions="tableOptions">
    <template slot="handle-column">
        <el-table-column slot-scope="scope" label="操作">
            <el-button type="primary">操作每一行</el-button>
        </el-table-column>
    </template>
 </custom-table>

监听含有选择框表格的勾选事件，需要在父组件定义自定义事件：

<custom-table
    @commitSelectionChange="commitSelectionChange"
    :tableOptions="tableOptions"
>
</custom-table> 
<script>
export default {
    methods: {
        // 方法接收一个数组(被勾选的当前行)
        commitSelectionChange(selectionArr){
            console.log(selectionArr)
        }
    }
}
</script>

表单

使用

直接复制代码到项目中，然后导入，即可使用

示例：

import CustomForm from '@/components/CustomForm'
<template>
    <custom-form :formOptions="formOptions"></custom-form>
</template>
<script>
    export default {
        components: {
            CustomForm
        }
    }
</script>

参数说明

formOptions 为组件配置对象，详细配置如下：

form参数配置

forms参数配置

分页

使用

直接复制代码到项目中，然后导入，即可使用

示例：

import Pagination from '@/components/Pagination'
<template>
    <pagination :page="page"></pagination>
</template>
<script>
    export default {
        components: {
            Pagination
        }
    }
</script>

参数说明

page 为分页组件配置对象，具体配置如下：

page参数配置

若要监听当前页改变、或者每页展示条数改变事件，需要在父组件定义监听事件

<pagination @currentChange="eventName"></pagination>

eventName 为你自己定义的事件名字

日期选择器

使用

直接复制代码到项目中，然后导入，即可使用

示例：

import DateTimePicker from '@/comoponents/DateTimePicker'
<template>
	<date-time-picker :type="type" :isWithShortcut="isWithShortcut"></date-time-picker>
</template>
<script>
	export default {
		components: {
			DateTimePicker
		}
    }
</script>

参数说明

type 为日期选择器类型，支持element-ui所有类型，isWithShortcut 为是否带快捷方式

参数配置

监听日期发生改变的值需要在父组件定义事件

<date-time-picker @handleChangeDate="eventName"></date-time-picker>

eventName 为自定义事件名