基于viewUI框架自定义表单交互表格

<template>
    <scrollContent :minusHeight='140'>
        <div class="zd-white-b">
            <Table :columns="columns" :data="dataList">
                <template #name="{ row, index }">
                    <Input v-model="row.name" v-if='editIndex == index'  @on-enter='editName'></Input>
                    <p @click='editName(index)' v-else>{{row.name}}</p>
                </template>
                <template #age="{ row, index }">
                    <p>
                        {{row.age}}
                        <Dropdown trigger="click" @on-click='changeAge($event,row)'>
                            <a href="javascript:void(0)">
                                <Icon type="md-create" />
                            </a>
                            <template #list>
                                <DropdownMenu>
                                    <DropdownItem name='20'>20</DropdownItem>
                                    <DropdownItem name='24'>24</DropdownItem>
                                    <DropdownItem name='26'>26</DropdownItem>
                                    <DropdownItem name='28'>28</DropdownItem>
                                    <DropdownItem name='30'>30</DropdownItem>
                                </DropdownMenu>
                            </template>
                        </Dropdown>
                    </p>
                </template>
                <template #address="{ row, index }">
                    <p>{{row.address}} <Icon type="md-settings" @click='editAddress' class='zd-cp'/></p>
                </template>
                <template #date="{ row, index }">
                    <p>{{row.date}}
                        <DatePicker
                        :open="dateIndex == index"
                        :model-value="row.date"
                        type="date"
                        @on-change="changeDate($event,row)">
                            <Icon type="md-calendar" @click='dateIndex=index' class='zd-cp'/>
                    </DatePicker>
                    </p>
                </template>
            </Table>
            <br>
        </div>
        <Modal v-model="modalFlag" :mask-closable="false" width='400'>
            <template #header>
                <h3 class='zd-modal-header'>
                    <span>测试</span>
                </h3>
            </template>
            <Select>
                <Option value="1" >北京</Option>
                <Option value="1" >天津</Option>
            </Select>
            <template #footer>
                <div slot="footer" class='zd-h5'>&nbsp;</div>
            </template>
        </Modal>
    </scrollContent>
    </template>
    
    <script>
    export default {
        mounted() {
        },
        data() {
            return {
                modalFlag:false,
                open:false,
                editIndex:null,
                dateIndex:null,
                columns: [
                    { title: 'Name', key: 'name',slot:'name'},
                    { title: 'Age', key: 'age',slot:'age'},
                    { title: 'Address', key: 'address',slot:'address'},
                    { title: 'date', key: 'date',slot:'date'}
                ],
                dataList: [
                    {
                        name: 'John Brown',
                        age: 18,
                        address: 'New York No. 1 Lake Park',
                        date: '2016-10-03',
                    },
                    {
                        name: 'Jim Green',
                        age: 24,
                        address: 'London No. 1 Lake Park',
                        date: '2016-10-01',
                    },
                    {
                        name: 'Joe Black',
                        age: 30,
                        address: 'Sydney No. 1 Lake Park',
                        date: '2016-10-02',
                    },
                    {
                        name: 'Jon Snow',
                        age: 26,
                        address: 'Ottawa No. 2 Lake Park',
                        date: '2016-10-04',
                    }
                ],
            };
        },
        methods:{
            editName(index){
                if(this.editIndex==index){
                    this.editIndex=null;    
                }else{
                    this.editIndex=index;
                }
            },
            changeAge(name,row){
                row.age=name;
            },
            editAddress(){
                this.modalFlag=true;
            },
            changeDate(date,row){
                row.date=date
                this.dateIndex=null;
            },
        }
    }
    </script>