table动态表格

<template>
    <a-card title="保养计划">
        <a-table
            :columns="columns"
            :dataSource="dataSource"
            :pagination="false"
        >
            <!-- 厂站 -->
            <template slot="name" slot-scope="text, record">
                <div key="name">
                    <a-input
                        v-if="record.editable"
                        style="margin: -5px 0;"
                        :value="text"
                        allowClear
                        placeholder="请输入厂站"
                        @change="e => handleChange(e.target.value, record.key, 'name')"
                    />
                    <template v-else>{{ text }}</template>
                </div>
            </template>
            <!-- 设备名称 -->
            <template slot="cname" slot-scope="text, record">
                <div key="cname">
                    <a-input
                        v-if="record.editable"
                        style="margin: -5px 0;"
                        :value="text"
                        allowClear
                        placeholder="请输入设备名称"
                        @change="e => handleChange(e.target.value, record.key, 'cname')"
                    />
                    <template v-else>{{ text }}</template>
                </div>
            </template>
            <!-- 上次保养日期 -->
            <template slot="time" slot-scope="text, record">
                <div key="time">
                    <a-input
                        v-if="record.editable"
                        style="margin: -5px 0;"
                        :value="text"
                        allowClear
                        placeholder="请输入设备名称"
                        @change="e => handleChange(e.target.value, record.key, 'time')"
                    />
                    <template v-else>{{ text }}</template>
                </div>
            </template>
            <!-- 保养周期（天） -->
            <template slot="day" slot-scope="text, record">
                <div key="day">
                    <a-input
                        v-if="record.editable"
                        style="margin: -5px 0;"
                        :value="text"
                        allowClear
                        placeholder="请输入保养周期（天）"
                        @change="e => handleChange(e.target.value, record.key, 'day')"
                    />
                    <template v-else>{{ text }}</template>
                </div>
            </template>
            <!-- 下次保养日期 -->
            <template slot="begin_time" slot-scope="text, record">
                <div key="begin_time">
                    <a-date-picker
                        v-if="record.editable"
                        style="width: 100%; margin: -5px 0;"
                        :value="text"
                        allowClear
                        v-model="begin_times"
                        format="HH:mm"
                        placeholder="请选择开始时间"
                        @change="e => handleChange(begin_times, record.key, 'begin_time')"

                    />
                    <template v-else>{{ text }}</template>
                </div>
            </template>

            <!-- 按钮 -->
            <template slot="operation" slot-scope="text, record">
                <template v-if="record.editable">
                    <span v-if="record.isNew">
                        <a @click="saveRow(record.key)">新增</a>
                        <a-divider type="vertical" />
                        <a-popconfirm :title="$t('deleteConfirm')" @confirm="remove(record.key)">
                            <a>删除</a>
                        </a-popconfirm>
                    </span>
                    <span v-else>
                        <a @click="saveRow(record.key)">保存</a>
                        <a-divider type="vertical" />
                        <a @click="cancle(record.key)">取消</a>
                    </span>
                </template>
                <span v-else>
                    <a @click="toggle(record.key)">编辑</a>
                    <a-divider type="vertical" />
                    <a-popconfirm :title="$t('deleteConfirm')" @confirm="remove(record.key)">
                        <a>删除</a>
                    </a-popconfirm>
                </span>
            </template>
        </a-table>
        <a-button v-show="dataSource.length!==1" style="width: 100%; margin-top: 16px; margin-bottom: 8px;" type="dashed" icon="plus" @click="newMember">新增计划</a-button>
    </a-card>
</template>

<script>
const columns = [
    {
        title: '厂站',
        dataIndex: 'name',
        key: 'name',
        // width: '20%',
        scopedSlots: { customRender: 'name' }
    },
    {
        title: '设备名称',
        dataIndex: 'cname',
        key: 'cname',
        // width: '20%',
        scopedSlots: { customRender: 'cname' }
    },
    {
        title: '上次保养日期',
        dataIndex: 'time',
        key: 'time',
        // width: '40%',
        scopedSlots: { customRender: 'time' }
    },
    {
        title: '保养周期（天）',
        dataIndex: 'day',
        key: 'day',
        // width: '40%',
        scopedSlots: { customRender: 'day' }
    },
    {
        title: '下次保养日期',
        dataIndex: 'begin_time',
        key: 'begin_time',
        // width: '40%',
        scopedSlots: { customRender: 'begin_time' }
    },
    {
        title: '操作',
        key: 'operation',
        width: '10%',
        scopedSlots: { customRender: 'operation' }
    }
]

const dataSource = [
    {
        key: 1,
        name: '小明777',
        cname: '001',
        editable: false,
        time: '行政部',
        day: '1',
        begin_time: '2021-09-29'
    }
]

export default {
    name: 'UserForm',
    // i18n: require('./i18n-user'),
    data () {
        return {
            columns,
            dataSource,
            newTabIndex: 0,
            begin_times: undefined
        }
    },
    computed: {
        dataColumns () {
            return this.columns.map(column => {
                column.title = this.$t('table.' + column.key)
                return column
            })
        }
    },
    methods: {
        handleSubmit (e) {
            e.preventDefault()
        },
        newMember () {
            const activeKey = `newKey${this.newTabIndex++}`
            this.dataSource.push({
                key: activeKey,
                name: '',
                cname: '',
                time: '',
                day: '',
                begin_time: '',
                editable: true,
                isNew: true
            })
        },
        remove (key) {
            const newData = this.dataSource.filter(item => item.key !== key)
            this.dataSource = newData
        },
        saveRow (key) {
            let target = this.dataSource.filter(item => item.key === key)[0]
            target.editable = false
            target.isNew = false
        },
        toggle (key) {
            let target = this.dataSource.filter(item => item.key === key)[0]
            target.editable = !target.editable
        },
        getRowByKey (key, newData) {
            const data = this.dataSource
            return (newData || data).filter(item => item.key === key)[0]
        },
        cancle (key) {
            let target = this.dataSource.filter(item => item.key === key)[0]
            target.editable = false
        },
        handleChange (value, key, column) {
            const newData = [...this.dataSource]
            const target = newData.filter(item => key === item.key)[0]
            if (target) {
                target[column] = value
                this.dataSource = newData
            }
        }
    }
}
</script>

<style scoped lang="less">
/deep/.ant-card-body {
    padding: 0;
}

/deep/.ant-card-head {
    padding: 0;
}

/deep/.ant-card-head-title {
    padding: 0;
}
</style>