教大家封装一个基础el-table 行内气泡编辑框，你一定用的到

今天的任务就是封装这个用element ui 组件来封装，如果让你封装你会怎么封装呢？

不说废话了，直接上代码

新建一个EditablePopoverColumn.vue组件文件

<template>
    <el-table-column :prop="prop" :label="label">
        <template slot-scope="scope">
            <el-popover :ref="`popover${prop}`" trigger="click" placement="top">
                <div class="flex-row">
                    <el-input v-if="!isSelect" style="width: 65%; margin-right: 10px;"
                        v-model="scope.row[prop]"></el-input>
                    <el-select v-else style="width: 65%; margin-right: 10px;" v-model="scope.row[prop]">
                        <el-option v-for="item in selectOptions" :key="item.value" :label="item.label"
                            :value="item.label"></el-option>
                    </el-select>
                    <el-button icon="el-icon-check" type="primary" size="mini"
                        @click="saveEdit(scope.row, prop)"></el-button>
                    <el-button icon="el-icon-close" type="info" size="mini"
                        @click="cancelEdit(scope.row, prop)"></el-button>
                </div>
                <el-button slot="reference" type="text">{{ scope.row[prop] || `请输入${label}`
                    }}
                </el-button>
            </el-popover>
        </template>
    </el-table-column>
</template>

<script>
export default {
    props: {
        prop: String,
        label: String,
        selectOptions: Array
    },
    computed: {
        isSelect() {
            return Array.isArray(this.selectOptions) && this.selectOptions.length > 0;
        }
    },
    data() {
        return {
            
        };
    },
    methods: {
        saveEdit(row, prop) {
                this.$refs[`popover${prop}`].doClose();
        },
        cancelEdit(row, prop) {
            this.$refs[`popover${prop}`].doClose();
        }
    }
};
</script>

在相关的页面引用就好拉~

<el-table :data="tableData" style="width: 100%">
            <editable-popover-column prop="contactName" label="联系人"></editable-popover-column>
            <editable-popover-column prop="position" label="职位"
                :select-options="list"></editable-popover-column>
........

</el-table>

剩下的作业就交给你们啦~  学着做出来吧