【VUE】elementUI 表格点击单元格可编辑或选择

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)
            }
        },