Element-vue NPM

中后台页面组件

基于element-ui的二次封装

一、fd-form组件

1.Form Attributes

参数	说明	类型	默认值
form	见2.1表	Array	[]
hasControl	控制按钮是否显示	Booler	true
sumbitText	提交按钮显示文本	String	'提交'
resetText	重置按钮显示文本	String	'重置'

2.Form Option

(2.1表)

参数	说明	类型	默认值
title	表单名称	String	-
key	字段	String	-
type	表单类型	input、select、radio...	Input
options	表单为select、radio的时候用	Array \| {label: '表单', value: ''}
defaultValue	默认值	String \| Number \| Array
props	接受element原始属性值	Object	{}
isRequired	是否校验	Booler	false
contentWidth	文本宽度	Number \| String	220px
rule	校验规则	Array \| Object	[] \| {}

3.Form Events

事件名称	说明	参数
submit	Form提交方法，接受两个参数。参数一form值，第二个参数校验值	Function(data, valid)

<Fd-main :form="formData" @submit="onSubmit"></Fd-main>

onSubmit(data, valid) {
  // 接受两个参数：
  // data: 返回的formdata值 类型：Object
  // valid: 校验值 类型： Booler
 }

二、table组件

1.Aable Attributes

table列表接受两个属性值，一个为列表值，一个为配置值。

参数	说明	类型	默认值
tableData	table列表值	Array
tableConfig	列表配置项	Array

2.tableConfig Attributes

参数	说明	类型	默认值
key	列表字段	String	''
title	列表标题	String	''
props	接受element原始属性值	Object	{}
format	格式化时间的时候传递	Booler	true
render	render函数进行渲染	Function	-

tableConfig: [
        { key: "date", title: "时间", props: { width: "180" }, format: true },
        { key: "name", title: "姓名", },
        { key: "address", title: "地区" },
    ]

3.Table-column Scoped Slot

通过 v-slot:name = { scope } 可以获取到 row, column, $index的数据，用法参考 demo。

注意:name就是key的值对应。

name	说明	默认值
key	自定义列的内容，参数为 { row, column, $index }

<Fd-main :tableData="list" :tableConfig="tableConfig">
        <template v-slot:name="scope">{{ scope.row.name }}</template>
</Fd-main>

4.table使用render函数

参考Vue-render地址：参考地址

参数一：render函数，参数二：当前行值

 {
    title: '操作',
    render: (h, { row }) => {
         return h('el-button', {
            props: {
              type: 'primary'
            },
            on: {
              click: () => {
                this.onUpdate(row);
                },
              },
           domProps: {
              innerHTML: '操作',
             },
          });
     },
 },

三、Pagination 分页使用

Pagination Attributes

参数	说明	类型	默认值
currentPage	当前页码	Number	1
pageSize	页数	Number	10
total	总条数	number	-
pageSizes	每页显示个数选择器的选项设置	number ｜ []	10, 20, 30, 40, 50, 100

Pagination Events

事件名称	说明	回调函数
changeSize	pageSize 改变时会触发	size，formData
changePage	currentPage 改变时会触发	page, formData

<template> 
	<FdMain
      @changePage="changePage"
      :total="total"
      :currentPage="1"
      :pageSize="10"
    ></FdMain>
</template>

export default {
 methods: {
    changePage(page, form) { 
      // 接受两个参数
      //1. page 当前页码
      //2. form 表单数据
      console.log(page, form);
    },
  },
}

vue js json html css scss less java

0.0.1

3 years ago

0.1.0

6 years ago