dynamic form inputs

dynamic form inputs

by xie shine

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
    <div class="el-table el-table--border el-table--enable-row-hover" style="width: 100%">
        <el-form :model="listData" ref="dynamicValidateForm">
            <table class="el-table__header" style="width: 100%" cellspacing="0" cellpadding="0" border="0">
                <thead>
                <tr>
                    <th v-for="(header, index) of listData.headers">
                        <div class="cell">{{ header }}</div>
                    </th>
                </tr>
                </thead>
                <tbody class="el-table__body">
                <tr v-for="(item, index) of listData.tableData" @dblclick="click">
                    <td v-for="(column,order) of listData.columns" class="cell">
                        <el-form-item v-if="column.type==='input'" :key="index+'date'+order" :prop="'tableData.'+index+'.'+column.prop" :rules="column.rule">
                            <el-input size="small" v-model="item[column.prop]"></el-input>
                        </el-form-item>
                        <div v-else-if="column.prop==='opts'">
                            <el-button icon="delete" @click="del(index)"></el-button>
                        </div>
                        <div class="cell" v-else>
                            {{ item[column.prop] }}
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
            <el-button @click="add()">添加</el-button>
            <el-button type="primary" @click="save()">保存</el-button>
        </el-form>
    </div>
</div>

CSS

@import url("//unpkg.com/[email protected]/lib/theme-default/index.css");

JavaScript

new Vue({
        el: "#app",
        data: {
            listData: {
                headers: ['销售商品SKU', '销售单位', '单位关系', '预设销售价（元）', '预设进货价（元）', '状态', '操作'],
                columns: [{
                    prop: 'sku'
                }, {
                    type: 'input',
                    prop: 'sale',
                    rule: {
                        required: true,
                        message: '销售单位不能为空'
                    }
                }, {
                    prop: 'guanxi',
                    type: 'input',
                    rule: {
                        required: true,
                        message: '单位关系不能为空'
                    }
                }, {
                    prop: 'yushe_sale',
                    type: 'input',
                    rule: {
                        required: true,
                        message: '预设销售价不能为空'
                    }
                }, {
                    prop: 'yushe_in',
                    type: 'input',
                    rule: {
                        required: true,
                        message: '预设进货价不能为空'
                    }
                }, {
                    prop: 'status'
                }, {
                    prop: 'opts'
                }],
                tableData: [{
                    sku: 'fd',
                    sale: 'dfd',
                    guanxi: '',
                    yushe_sale: '',
                    yushe_in: '',
                    status: ''
                }, {
                    sku: 'fd1',
                    sale: 'dfd',
                    guanxi: '',
                    yushe_sale: '',
                    yushe_in: '',
                    status: ''
                }, {
                    sku: 'fd2',
                    sale: '',
                    guanxi: '',
                    yushe_sale: '',
                    yushe_in: '',
                    status: ''
                }, {
                    sku: 'fd3',
                   ...