这篇文章给大家介绍vue 中怎么利用vxe-table 制作可编辑表格,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
1. 全局安装
npm install xe-utils@3 vxe-table@3
main.js 中引入
import 'xe-utils'; import VXETable from 'vxe-table'; import 'vxe-table/lib/style.css'; Vue.use(VXETable);
其实它可以按需加载来减少项目体积,但是我觉得有点麻烦就没弄,想要了解可以点击下面链接查看~ vue-table 按需加载
2. 基础用法
<template> <vxe-table :align="allAlign" :data="tableData"> <vxe-table-column type="seq" width="60"></vxe-table-column> <vxe-table-column field="name" title="名称"></vxe-table-column> <vxe-table-column field="desc" title="描述"></vxe-table-column> <vxe-table-column field="link" title="链接"></vxe-table-column> </vxe-table> </template> <script> export default { data () { return { allAlign: null, tableData: [ { name: "html", desc: '超文本标记语言', link: 'https://www.runoob.com/html/html-tutorial.html' }, { name: "css", desc: '层叠样式表', link: 'https://www.runoob.com/css/css-intro.html' }, { name: "js", desc: 'JavaScript', link: 'https://www.runoob.com/js/js-tutorial.html' } ] } } } </script>
以上,即可实现一个基础表格,但是现在仅仅是表格展示,实现编辑还需要另外的配置。
3. 实现编辑
<template> <!--表格添加edit-config配置--> <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}"> <!--对单元格vxe-table-column进行改造,使用edit-render来配置编辑属性---> <vxe-table-column title="描述" width="180" fixed="left" field="desc" :edit-render="{name: 'input', attrs: {type: 'text'}}"> </vxe-table-column> </vxe-table> </template>
具体配置可以查看 api
3. 实现下拉选择
<template> <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}"> <!--和输入框编辑区别仅在于edit-render的配置不同,data中新增选项selection---> <vxe-table-column title="是否展示" width="180" field="isShow" :edit-render="{name: 'select', options: selection, optionProps: {value: 'status', label: 'label'}}"> </vxe-table-column> </vxe-table> </template> <script> export default { data () { return { allAlign: null, tableData: [ { name: "html", desc: '超文本标记语言', link: 'https://www.runoob.com/html/html-tutorial.html', isShow: 1 } // 省略一下多条数据········ ], selection: [ {status: 1, label: '是'}, {status: 0, label: '否'} ] } } } </script>
4. 自定义模板
vxe-table自定义模板是使用插槽实现的,可以使用<template #插槽名></template>
实现,比如:
<vxe-table-column field="name" width="120" title="名称" :edit-render="{name: 'input', attrs: {type: 'text'}}"> <!--使用#header自定义表头--> <template #header> <span>名称</span> <span >技术</span> </template> <!--使用#default自定义内容--> <template #default="{row}"> <span>技术名称</span> <span>{{row.name}}</span> </template> <!--使用#edit自定义编辑--> <template #edit="{row}"> <p>技术名称</p> <input type="text" v-model="row.name" class="vxe-default-input"> </template> </vxe-table-column>
需要演示,所以把名称列做成了可编辑列,使用#header、#default、#edit分别自定义了列头、默认显示内容、编辑显示内容,如下图:
5. 实时保存功能
使用vxe-table的edit-closed方法监听编辑框关闭,调用更新接口即可实现。
<template> <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}" @edit-closed="updateData"> <vxe-table-column title="是否展示" width="180" field="isShow" :edit-render="{name: 'select', options: selection, optionProps: {value: 'status', label: 'label'}}"> </vxe-table-column> </vxe-table> </template> <script> export default { data () { // 省略掉··· }, methods: { updateData ({ row, column }) { // 后台更新接口接受一条数据,所以传row即可 console.log(row); } } } </script>
其实官方方法还实现了检查当前单元格内容是否更改,不过我们这里数据结构略复杂,源码里的方法不太适用。 这里贴出来一下
editClosedEvent ({ row, column }) { const $table = this.$refs.xTable const field = column.property const cellValue = row[field] // 判断单元格值是否被修改 if ($table.isUpdateByRow(row, field)) { setTimeout(() => { this.$XModal.message({ content: `局部保存成功! ${field}=${cellValue}`, status: 'success' }) // 局部更新单元格为已保存状态 $table.reloadRow(row, null, field) }, 300) } }
关于vue 中怎么利用vxe-table 制作可编辑表格就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。