Vue3+Element+TypeScript可编辑表格

1、html代码

                <el-button type="primary" @click="add" size="small">添加</el-button>
                <el-table 
                    :data="TableData" 
                    
                    style="width: 100%" 
                    ref="TableRef"
                    @cell-click="getCell"
                    border
                    show-summary
                    size="small"
                >
                    <!-- <el-table-column type="selection" width="30" /> -->
                    <el-table-column label="序号" type="index"  width="50">
                        
                        <template #default="scope">
                            <div>{{scope.row.index+1}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="分类" min-width="150">
                        <template #default="scope">
                            <el-select v-model="scope.row.baseCategory" filterable size="small" placeholder="请选择" v-if="scope.row.index == tabRowIndex && scope.column.no == tabColumnIndex" ref="tabSelect" @change="fenleiChange">
                            <el-option
                                v-for="item in chanpinfenleiOptions"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            />
                            </el-select>
                            <div v-else>{{ scope.row.baseCategory }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="型号" min-width="150">
                        <template #default="scope">
                            <el-select v-model="scope.row.modelNumber" filterable size="small" placeholder="请选择" v-if="scope.row.index == tabRowIndex && scope.column.no == tabColumnIndex" ref="tabSelect" @change="leixingChange">
                            <el-option
                                v-for="item in chanpinleixingData"
                                :key="item.modelNumber"
                                :label="item.modelNumber"
                                :value="item.modelNumber"
                            />
                            </el-select>
                            <div v-else>{{ scope.row.modelNumber }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格" min-width="150">
                        <template #default="scope">
                            <el-select v-model="scope.row.specification" filterable  size="small" placeholder="请选择" v-if="scope.row.index == tabRowIndex && scope.column.no == tabColumnIndex" ref="tabSelect" @change="guigeChange">
                            <el-option
                                v-for="item in guigeData"
                                :key="item.specification"
                                :label="item.specification"
                                :value="item.specification"
                            />
                            </el-select>
                            <div v-else>{{ scope.row.specification }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="厚度" min-width="150">
                        <template #default="scope">
                            <el-select v-model="scope.row.thickness" filterable size="small" placeholder="请选择" v-if="scope.row.index == tabRowIndex && scope.column.no == tabColumnIndex" ref="tabSelect" @change="houduChange">
                            <el-option
                                v-for="item in houduOptions"
                                :key="item.thickness"
                                :label="item.thickness"
                                :value="item.thickness"
                            />
                            </el-select>
                            <div v-else>{{ scope.row.thickness }}</div>
                        </template>
                    </el-table-column>

                    <el-table-column label="单位" min-width="70">
                        <template #default="scope">
                            <div>{{ scope.row.unit }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="数量" prop="quantity" sortable min-width="100">
                        <template #default="scope" >
                            <el-input v-model="scope.row.quantity" ref="tabInput" size="small" type="number" placeholder="请输入" @blur="inputBlur" @input="inputOnNum" v-if="scope.row.index == tabRowIndex && scope.column.no == tabColumnIndex"/>
                            <div  v-else>{{scope.row.quantity}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="备注" min-width="100">
                        <template #default="scope" >
                            <el-input v-model="scope.row.description" ref="tabInput" size="small" placeholder="请输入" @blur="inputBlur" v-if="scope.row.index == tabRowIndex && scope.column.no == tabColumnIndex"/>
                            <div  v-else>{{scope.row.description}}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right" align="right" width="80">
                        <template #default="scope">
                            <!-- <el-button size="small" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button> -->
                            <el-popconfirm title="确定要删除吗?" @confirm="tabDelete(scope.$index, scope.row)" confirm-button-text="是"
                                cancel-button-text="否">
                                <template #reference>
                                    <el-button size="small" type="danger">删除
                                    </el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>

2、js代码

//可编辑表格逻辑代码》》》》》》》》》》》》》
//定义选中行键值对以及表格内input和select标签声明变量，方便调用
const tabRowIndex = ref();
const tabColumnIndex = ref();
const tabInput=ref()
const tabSelect=ref()


//监听单击单元格
const getCell = (row:any,column:any,cell:any,event:any) =>{
  tabRowIndex.value=row.index;
  tabColumnIndex.value=column.no
  //单机单元格的时候聚焦输入框
  nextTick(()=>{
    //input框监听
    if( column.label == '数量' || column.label == '单价' || column.label == '折扣' || column.label == '备注' ){
        tabInput.value.focus()
        tabInput.value.select()
    }else if(column.label == '分类' ){//下拉框监听
        
        tabSelect.value.focus()//聚焦
    }
  })
}


//点击单元时根据此一行选择的数据，将与关联的本行数据更新
const getOrderJingBan = (selectText:any,sortType:any) =>{
    const tDFenLei = TableData.value[tabRowIndex.value].baseCategory
    const tD1 = TableData.value[tabRowIndex.value].modelNumber
    const tD2 = TableData.value[tabRowIndex.value].specification
    const tD3 = TableData.value[tabRowIndex.value].thickness


}


//表格输入框失焦监听
const inputBlur = () =>{
  tabRowIndex.value=null;
  tabColumnIndex.value=""
}


//表格输入框值实时监听
const inputOnNum = (e:any) =>{


}


//下拉框数据
const chanpinleixingData=ref<any>([])
const guigeData=ref<any>([])
const houduOptions=ref<any>([])
const wujinOptions=ref<any>([])


//下拉框改变时，将选中的键值对清空
const fenleiChange = async () =>{
    tabRowIndex.value=null;
    tabColumnIndex.value=""
}