基于element ui table搭建的表格编辑
github 地址 https://github.com/442627268/sb-table
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="药品名称"
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>
