在写项目的时候需要用到el-ui中table里进行双击后出现input框的功能,找了找网上大部分都是选项式API的写法,在此贴上我个人根据选项式API改写的组合式API的写法。
主要参考的文章来自该文章
el-table
要实现双击某个单元格修改,需要添加:cell-class-name
,@cell-dblclick
,在表格中添加<template>
代码块
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <el-table :data="tablePollute" border class="table" ref="multipleTable" header-cell-class-name="table-header" :span-method="arraySpanMethod" @cell-dblclick="cellClick" :cell-class-name="tableCellClassName"> <el-table-column prop="case1" label="1" align="center"> <template #default="scope"> <div v-if="scope.row.index!=0 && scope.row.index!=1 && scope.row.index === rowIndex && scope.column.index === columnIndex &&scope.column.label != '月份'"> <el-input v-model="scope.row.case1" ref='editInput' type="number" @blur="inputBlur(scope)" /> </div> <div v-else>{{ scope.row.case1 }}</div> </template> </el-table-column> </el-table>
|
函数
我写的过程中也是遇到了一些坑,还不太理解tableCellClassName
这个函数具体是用来干什么的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31
| interface TableCell { row: any; column: any; rowIndex: number; columnIndex: number; } const tableCellClassName = ({row, column, rowIndex, columnIndex}:TableCell)=>{ row.index=rowIndex column.index=columnIndex }; const rowIndex=ref(-1) const columnIndex=ref(-1) const editInput=ref()
const cellClick = async (row:any, column:any, cell:any, event:any) =>{ console.log(row, '单条数据', column, '列信息', cell, '事件', event) if (column.label != '月份' && row.index!=0 && row.index!=1) { rowIndex.value = row.index columnIndex.value = column.index await nextTick(()=>{ editInput.value.focus() }); } };
function inputBlur(scope:any) { rowIndex.value = -1 columnIndex.value = -1 mySum(tablePollute.value.length) };
|