vue-form-table
介紹
基于element-ui的el-form和el-table做的二次封裝
倉庫地址：https://gitee.com/ziyuan_xcc/vue-form-table
組件說明文檔：https://shimo.im/docs/Pg3WWJpYr6PJHjqh
示例
在這里插入圖片描述
<template>
<div class="demo">
<div>
<h1>myForm</h1>
<my-form :data="data" :form="form" :rules="rules"></my-form>
</div>
<div>
<h1>TreeGrid</h1>
<tree-grid :columns="tableHeader" :dataSource="tableData" :info="tableInfo" :loading="loading"></tree-grid>
</div>
</div>
</template>
<script>
import myForm from '@/components/form/myForm'
import TreeGrid from '@/components/TreeGrid'
export default {
name: 'demo',
components: {myForm, TreeGrid},
data () {
return {
data: [
{model: 'name', label: '姓名', type: 'input'},
{model: 'height', label: '身高', type: 'input', inputType: 'number', toFixed: 2, limitMax: 300, limitMin: 1},
{model: 'sex', label: '性別', type: 'radio', options: [{label: '男', value: 0}, {label: '女', value: 1}]}
],
form: {name: '', sex: 0, height: ''},
rules: {},
loading: false,
tableHeader: [
{titleName: '111', fieldName: 'a'},
{titleName: '222', fieldName: 'b'},
{titleName: '333', fieldName: 'c'}
],
tableData: [
{a: 1, b: 31, c: 4},
{a: 53, b: 31, c: 4},
{a: 23, b: 32, c: 4}
],
tableInfo: {pageNum: 1, pageSize: 10, total: 3}
}
}
}
</script>
