vxe-table 文档,vue做表格
本文主要介绍在vue中使用vxe-table制作可编辑表格的过程。本文通过示例代码非常详细的为您介绍，对您的学习或工作有一定的参考价值，有需要的朋友可以参考一下。
项目中有一个表格需要在线编辑，用element的el-table来实现。单元格中的基本情况是监视单元格的点击以在范围标签和输入标签之间切换。在复杂单元格中使用了大量的条件判断来实现相应的编辑操作，如下拉选择、弹出框编辑等。整个表格有几十列，几十个数据，出现了明显的停滞。经过多次操作(比如用原生输入代替el-input，减少判断和频繁的数据切换等。)，虽然速度有所提升，但还是肉眼可见，基本无法使用。然后我去vxe-table重新写了这个表格。(别问我为什么不用更好的vxe-table。谁会在写代码的时候首先想到重构而不是尝试优化？)
我们来记录一下使用过程。
1.全球安装
npm安装xe-utils@3 vxe-table@3
main.js中介绍的
导入“xe-utils”；
从“vxe-table”导入VXETable
导入“vxe-table/lib/style . CSS”；
vue . use(vxe table)；
其实是可以按需加载的，以减少项目的体积，但是因为觉得有点麻烦所以没有得到。想了解的可以点击下面的链接查看~ vue-table点播加载。
2.基本用法
模板
vxe-table:align= all align :data= table data
vxe-表格-列类型=序列宽度= 60 /vxe-表格-列
vxe表列字段=名称标题=名称/vxe表列
vxe表列字段= desc 标题=描述/vxe表列
vxe-table-column field= link title= link /vxe-table-column
/vxe-table
/模板
脚本
导出默认值{
data () {
返回{
allAlign:空，
表格数据：[
{
名称： html ，
Desc:“超文本标记语言”，
链接：“https://www . run OOB . com/html/html-tutorial . html”
},
{
名称： css ，
Desc:“级联样式表”，
链接：“https://www . run OOB . com/CSS/CSS-intro . html”
},
{
姓名： js ，
desc:“JavaScript”，
链接：“https://www . run OOB . com/js/js-tutorial . html”
}
]
}
}
}
/脚本
以上，可以实现一个基本的表格，但现在只是表格展示，需要额外配置才能实现编辑。
3.实现编辑
模板
！-向表中添加编辑配置配置-
vxe-表格边框：data= table data :edit-config= { trigger: click ，mode: cell}
！-修改单元格vxe-table-column，使用edit-render配置编辑属性-
vxe-table-column title= description width= 180 fixed= left field= desc
:edit-render={name: input ，attrs: {type: text}}
/vxe-表-列
/vxe-table
/模板
具体配置见api。
3.实现下拉选择。
模板
vxe-表格边框：data= table data :edit-config= { trigger: click ，mode: cell}
！-编辑和输入框唯一的区别是编辑-渲染的配置不同，在数据中增加了新的选项选择-
vxe-table-column title= show width= 180 field= is show
:edit-render={name: select ，options: selection，optionProps: {value: status ，label: label}}
/vxe-表-列
/vxe-table
/模板
脚本
导出默认值{
data () {
返回{
allAlign:空，
表格数据：[
{
名称： html ，
Desc:“超文本标记语言”，
链接： https://www . run OOB . com/html/html-tutorial . html ，
isShow: 1
}
//省略几段数据.
],
选择：[
{状态：1，标签:“是”}，
{状态：0，标签:“否”}
]
}
}
}
/脚本
4.自定义模板
vxe-table自定义模板是使用插槽实现的，并且可以使用template # slot name /template实现，例如：
vxe-table-column field= name width= 120 title= name
:edit-render={name: input ，attrs: {type: text}}
！-使用#header自定义标题-
模板#标题
名称/span
span style=font-size: 12px。颜色：#ccc技术/span
/模板
！-使用#default-自定义内容
template # default=“{ row }”
技术名称/span
span{{row.name}}/span
/模板
！-使用#edit来自定义编辑-
模板# edit=“{ row }”
p技术名称/p
输入类型= text v-model= row . name class= vxe-default-input
/模板
/vxe-表-列
需要演示，所以将名称列做成可编辑列，使用#header、#default和#edit自定义列头、默认显示内容和编辑显示内容，如下图所示：
5.实时保存功能
使用vxe-table的edit-closed方法监控编辑框的关闭，调用更新接口。
模板
vxe-表格边框：data= table data :edit-config= { trigger: click ，mode: cell}
@edit-closed=updateData
vxe-table-column title= show width= 180 field= is show
:edit-render={name: select ，options: selection，optionProps: {value: status ，label: label}}
/vxe-表-列
/vxe-table
/模板
脚本
导出默认值{
data () {
//省略.
},
方法：{
updateData ({ row，column }) {
//后台更新接口接受一条数据，所以只需传递给row即可。
console . log(row)；
}
}
}
/脚本
其实官方的方法也可以检查当前单元格的内容是否有变化，只是这里的数据结构略复杂，源代码中的方法不太适用。贴在这里。
editClosedEvent ({ row，column }) {
const $table=this。$refs.xTable
常量字段=column.property
const cellValue=row[field]
//确定单元格值是否已被修改。
if ($table.isUpdateByRow(row，field)) {
setTimeout(()={
这个。$XModal.message({
内容： `部分保存成功！${field}=${cellValue} `，
状态：“成功”
})
//在本地将单元格更新为保存状态。
$table.reloadRow(row，null，field)
}, 300)
}
}
也就是以上是编写可编辑表格的基本方法。我来研究一下，在数据很深的情况下，如何检测数据是否发生了变化。
综上所述，vxe-table的可编辑表格直接用editable函数构建，配置后即可使用，避免了el-table的各种判断切换，更优雅的实现了编辑功能。此外，它还支持虚拟滚动，在加载大量数据时可以有更好的性能。缺点是UI图确定后需要花时间重写表格样式。
我建议如果遇到复杂的表，不要想着自己优化性能，一步到位用vxe-table就行了，后期增重会是个教训。
这就是这篇关于在vue中用vxe-table制作可编辑表单的文章。更多相关的vue可编辑表单，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。