基于element ui table搭建的表格编辑

基于element ui table搭建的表格编辑

github 地址 https://github.com/442627268/sb-table

demo

<template>
    <div id="app">
        <el-table
                :data="tableData"
                style="width: 1200px">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="drugCode"
                    label="药品编码"
                    width="100"
            ></el-table-column>
            <el-table-column
                    prop="drugName"
                    label="药品名称"

                    width="180">
                <template slot-scope="scope">
                    <column-table :key="scope.$index" @rowEnter="(row,cellback)=>rowEnter(row,scope.$index,cellback)"
                                  @infinitescroll="infinitescroll" :column="column" :columnData="columnData"
                                  v-model="scope.row.drugName"></column-table>
                </template>
            </el-table-column>
            <el-table-column
                    prop="drugSpec"
                    show-overflow-tooltip
                    width="180"
                    label="药品规格">
                <template slot-scope="scope">
                    <column-input :key="scope.$index" @editCell="(val)=>editCell(val,scope.$index)"
                                  v-model="scope.row.drugSpec"></column-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="drugSpec"
                    show-overflow-tooltip
                    width="180"
                    label="列编辑">
                <template slot-scope="scope">
                    <!--isColumn 开启列编辑 :isColumn="7"-->
                    <column-input :key="scope.$index" :isColumn="isColumn" v-model="scope.row.drugCountryName"></column-input>
                </template>
            </el-table-column>
            <el-table-column
                    prop="prodDate"
                    label="有效期至"
                    show-overflow-tooltip
                    width="260">
                <template slot-scope="scope">
                    <column-date :key="scope.$index" v-model="scope.row.perival"></column-date>
                </template>
            </el-table-column>
            <el-table-column
                    prop=""
                    label="外观质量"
                    show-overflow-tooltip
                    width="180">
                <template slot-scope="scope">
                    <column-select :key="scope.$index" :defaultItem="{value:'code',label:'tname'}" :selectData="options"
                                   :defaultStr="scope.row.appearanceStr"
                                   v-model="scope.row.appearance"></column-select>
                </template>
            </el-table-column>
            <el-table-column
                    prop="remark"
                    show-overflow-tooltip
                    label="备注">
                <template slot-scope="scope">
                    <column-input :key="scope.$index" v-model="scope.row.remark"></column-input>
                </template>
            </el-table-column>
        </el-table>
        <el-button @click="isColumn=7">开启列编辑</el-button>
    </div>
</template>
<style>
    #app .el-table {
        overflow: inherit;
    }

    #app .el-table .cell {
        overflow: inherit;
    }

    .min-height {
        height: 23px;
    }
</style>