vxe-table表格组件,编辑单元格详解(el-table组件同样适用)
作者：lswlovejrd
这篇文章主要介绍了vxe-table表格组件,编辑单元格详解(el-table组件同样适用),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vxe-table表格组件,编辑单元格(el-table组件同样适用)
vxe-table官网：https://vxetable.cn/#/table/api
- 效果：
点击一个单元格时，可编辑该单元格
通过属性edit-config设置编辑单元格：
<vxe-table
:tableData="tableData"
:columns="columns"
:edit-config="{trigger: 'click', mode: 'cell'}"
>
</vxe-table>trigger：触发方式，click为单击触发编辑，dblclick为双击触发编辑，manual为手动触发方式（只能用于 mode=row）mode：编辑模式，cell为单元格编辑模式，row为行编辑模式
另外，还有许多其他属性可以设置，详细参见官网
- js部分的代码：
export default {
data(){
return {
month: "",
tableData:[], //你要写入的数据
columns:[
{field: 'age', title: '年龄',minWidth:90,align:'center',editRender: {name: '$input', props: { type: 'number' },enabled:true}},
],
}
},- 这部分主要的代码是：
editRender: {name: '$input', props: { type: 'number' },enabled:true}}- 解释：
name: '$input' //单元格编辑采用输入框的形式。如果要是需要选择框的形式，则设置为$option，其它形式同上。
props: { type: 'number' } //以数字输入，如果是以文本输入，则：type: 'text'
enabled:true //是否可编辑总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。