基于element ui table搭建的表格編輯

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

demo

image

<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="藥品名稱(chēng)"

                    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="藥品規(guī)格">
                <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 開(kāi)啟列編輯 :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="外觀質(zhì)量"
                    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">開(kāi)啟列編輯</el-button>
    </div>
</template>
<style>
    #app .el-table {
        overflow: inherit;
    }

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

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