iview实现一个可编辑可校验组件

直接贴代码:可以实现表格编辑和检验

component---> EditForm--->index

<template>
    <div class="editable-form">
        <div class="editable-form-header">
            <!--扩展表格头部左右内容插槽 可忽略-->
            <slot name="header__left"></slot>
            <slot name="header__right"></slot>
        </div>
        <Form ref="form" :model="tableData">
            <Table
                ref="gridTable"
                :height="tableData.tableHeight"
                min-height="tableData.tableMinHeight"
                stripe
                border
                :columns="tableData.columns"
                :data="tableData.result"
                v-bind="gridData.attrs"
                v-on="gridData.on">
                <template v-for="item in tableTemplate" :slot="item.slot" slot-scope="{row,index}">
                    <FormItem :prop="'result.'+index+'.'+item.slot" :rules='tableData.rules[item.slot]'>
                        <component :is="item.type" v-model="tableData.result[index][item.slot]" v-bind="item.attrs" v-on="item.on">
                            <template v-if="item.type === 'Select'">
                                <Option v-for="(option, index) in item.selectList" :key="index" :label="option.label"
                                        :value="option.value">
                                </Option>
                            </template>
                        </component>
                    </FormItem>
                </template>
                <template slot="action">
                    <slot name="action"></slot>
                </template>
            </Table>
            <Page
                v-if="tableData.hasPagination&&tableData.totalCount>0"
                class="grid-table-page"
                :current="tableData.pageIndex"
                :page-size="tableData.pageSize"
                :total="tableData.totalCount"
                show-sizer
                show-total
                @on-change="handleCurrentChange">
            </Page>
        </Form>
        <Button @click="submit">提交</Button>
    </div>
</template>

<script>
    export default {
        name: "EditableForm",
        inheritAttrs: false,
        props: {
            gridData: {
                type: Object,
                required: true
            }
        },
        data () {
            return {
                tableData: {
                    hasPagination: true, //有分页
                    tableHeight: 500, //自动计算
                    tableMinHeight: 300, //最小高度
                    pageSize: 10, // 每页条数
                    pageIndex: 1, // 当前页码
                    columns: [], //列设置
                    result: [], //表格数据
                    multipleSelection: [], //多选数据
                    totalCount: 0, //总共多少条数据
                    totalPage: 0, //总共多少页
                }
            }
        },
        computed:{
            // 计算可编辑表格的行的数据集
            tableTemplate() {
                const list = this.tableData.columns
                return list.filter(item => item.hasOwnProperty("slot")&&item.slot!=='action')
            }
        },
        methods: {
            // 提交校验
            submit() {
                this.$refs.form.validate(val => {
                    if (val) {
                        console.log(val)
                    }
                })
            },
            // 翻页操作
            handleCurrentChange(page) {
                this.$emit('handleCurrentChange', page)
            }
        },
        watch: {
            gridData: {
                handler(data) {
                    let t = this.tableData
                    t.hasPagination = data.hasPagination !== false //有分页，默认true
                    t.subtractiveHeight = data.subtractiveHeight || 40 //表格高度
                    t.totalCount = data.totalCount || data.data.length // 总数
                    this.$set(t, 'columns', data.columns)
                    this.$set(t, 'result', data.data)
                    this.$set(t, 'rules', data.rules)
                },
                deep: true,
                immediate: true
            },
            tableData: {
                handler(data) {
                    this.$emit('getTableDate', data.result)
                },
                deep: true,
                immediate: true
            }
        },
    }
</script>

<style lang="less">
.editable-form{
    padding: 10px 24px;
    &-header{
        padding: 0 10px;
        height: 50px;
        line-height: 50px;
        display: flex;
        justify-content: space-between;
        .ivu-btn{
            margin-right: 5px;
        }
    }
    .ivu-page {
        padding: 10px 0;
        text-align: center;
    }
}
</style>

view--->edit-form---->index

<template>
    <EditableTable :gridData="gridData">
        <div slot="header__left">
            <span>付款明细</span>
            <span>总人数：30 人</span>
            <span>付款金额：50,000.00 元</span>
        </div>
        <div slot="header__right">
            <Button>分配</Button>
        </div>
        <div slot="action">
            <Button @click="handleSee('see')">查看</Button>
            <Button @click="handleSee('add')">新建</Button>
        </div>
    </EditableTable>
</template>

<script>
    import EditableTable from '@c/EditableForm/index.vue'
    export default {
        name: "editable-form",
        components: { EditableTable },
        data() {
            const that = this
            return {
                gridData: {
                    hasPagination: true,
                    columns: [
                        {
                            title: '姓名',
                            slot: 'name',
                            type: 'Input'
                        },
                        {
                            title: '省份',
                            slot: 'address',
                            type: 'Select',
                            attrs: {
                                clearable: true,
                                transfer: true,
                            },
                            selectList: [
                                {value: '0', label: '广州'},
                                {value: '1', label: '上海'},
                                {value: '2', label: '武汉'},
                            ]
                        },
                        {
                            title: '出生日期',
                            slot: 'birthday',
                            type: 'DatePicker',
                            attrs: {
                                clearable: true,
                                transfer: true,
                                type: "date",
                                format: "yyyy-MM-dd"
                            }

                        },
                        { title: "操作", minWidth: 150, fixed: "right", slot: "action", resizable: true }
                    ],
                    data: [
                        {
                            name: '王小明',
                            address: '0',
                            birthday: '2019-02-02',
                            status: 0,
                        },
                        {
                            name: '张小刚',
                            address: '1',
                            birthday: '2019-02-02',
                            status: 1,
                        },
                        {
                            name: '李小红',
                            address: '2',
                            birthday: '2019-02-02',
                            status: 0,
                        },
                        {
                            name: '周小伟',
                            address: '2',
                            birthday: '2019-02-02',
                            status: 1,
                        }
                    ],
                    rules: {
                        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                        address: [{ required: true, message: '请输入地址', trigger: 'change' }],
                        birthday: [{ required: true, message: '请输入生日', trigger: 'change', pattern: /.+/  }],
                    },
                    on: {
                        'on-select'(selection,row) {
                            console.log(selection,row,that)
                        },
                    },

                }
            }
        },
        methods: {
            handleSee(type) {
                console.log(type)
            }
        }
    }
</script>

3实现效果图：

 不需要使用for循环去校验每一行每一列的字段，直接通过this.$refs.table.validate()去校验即可：

如有错误，望指正！