1. 记录点击某单元格的在第几行,不能命名为 rowIndex ,columnIndex 同理
<vxe-table
@cell-click = "cellClick"
......
const colIndex = ref(0)
const rIndex= ref(0)
/** 点击单元格,记录第几列*/
const cellClick = (params)=> {
const { rowIndex,columnIndex } = params
colIndex.value = columnIndex
rIndex.value = rowIndex
}
2. 编辑表格的 slot : slotParams\row\rowIndex ...
<vxe-table
:edit-config="{
trigger: 'dblclick',
mode: 'row'
}"
......
// 序号
<vxe-column
field="index"
type="seq"
width="40"
fixed="left"
align="center"
title="序号">
</vxe-column>
<vxe-column
field="key"
title="key"
:edit-render="{
autofocus: '.vxe-input--inner'
}"
:width="140"
align="center"
>
// 1. #edit="slotParams"
<template #edit="slotParams">
<vxe-input
v-model="slotParams.row.key"
ref="input"
type="text"
placeholder=""
></vxe-input>
</template>
// 2. #edit="row"
<template #edit="slotParams">
<vxe-input
v-model="row.key"
ref="input"
type="text"
placeholder=""
></vxe-input>
</template>
</vxe-column>
// 3. #edit="rowIndex"
<vxe-column
field="operate"
title="操作"
:width="100">
<template #default="{ rowIndex }">
<el-button
type="danger"
link
@click="removeRowEvent(rowIndex)"
>删除</el-button>
</template>
</vxe-column>
3. 配置 clip-config
<vxe-table
:clip-config="clipConfig"
.......
const clipConfig = reactive({
isFillPaste: true,
isRowIncrement: true,
isColumnIncrement: true,
isCopy: true, // 是否启用复制功能
isCut: true, // 是否开启剪贴功能
isPaste: true, // 是否开启粘贴功能
/** 自定义粘贴后的方法 */
afterPasteMethod({ isCut, targetAreas }) {
/** 需要限制在第一列 */
tableData.value.forEach((v,i)=>{
v.index=i
})
targetAreas[0].rows.forEach(item=>{
areaIndex.value.push(item.index)
})
areaIndex.value.sort(function(a,b){
return a - b;
})
},
/** 自定义创建自增行数据的方法 */
createRowsMethod({isCut, cutAreas, currentAreas, targetAreas, cellValues, insertRows})
{
tableData.value = tableData.value.concat(insertRows)
tableData.value.forEach((v,i)=>{
v.index=i
})
insertRows.forEach(item=>{
areaIndex.value.push(item.index)
})
areaIndex.value.sort(function(a,b){
return a - b;
})
},
})