【VUE】elementUI 表格点击单元格可编辑或选择
elementUI 表格点击单元格可编辑这个有个博主写的很好,这里直接贴链接:https://codeantenna.com/a/tlfRACjxfUelementUI 表格点击单元格可选择<el-table-column prop="name" label="名称" align="center" width="200px" show-overflow-tooltip><temp
·
elementUI 表格点击单元格可编辑
这个有个博主写的很好,这里直接贴链接:
https://codeantenna.com/a/tlfRACjxfU
elementUI 表格点击单元格可选择
<el-table-column prop="name" label="名称" align="center" width="200px" show-overflow-tooltip>
<template slot-scope="scope">
<el-select
v-if="scope.row.isSelected"
v-model="scope.row.name" :value="scope.row.name"
:remote-method="changeName"
placeholder="请输入名称"
style="width:70%"
@change="selectHandle(scope.row,scope.$index)"
clearable filterable remote>
<el-option v-for="(item, index) in valueList" :label="item.code+'/'+item.value" :value="item.name" :key="index"></el-option>
</el-select>
<div @click="cellClick(scope.row,scope.$index)" v-else>
{{scope.row.name}}
</div>
</template>
</el-table-column>
method:
//点击单元格
cellClick (row,index) {
row.isSelected = !row.isSelected
this.$set(this.dataList, index, row)
},
//select输入搜索
async changeName(inputValue){
//模糊查询名称
let param = {'keyWord': inputValue};
this.valueList = await getNameInfo(param)
},
//选择
selectHandle(row,index){
console.info(row)
row.oldSku = row.sku
let nameInfo= this.valueList .filter(item=>item.sku == row.sku)
console.info(skuInfo)
if(skuInfo.length>0){
row.skuName = skuInfo[0].skuName
row.isSelected = !row.isSelected
row.isEdit = true
this.$set(this.dataList, index, row)
}
},
更多推荐
已为社区贡献7条内容
所有评论(0)