×

vue开发应用:实例总结下vxe-table插件的使用法则

作者:Web前端之家2021.09.14来源:Web前端之家浏览:640评论:0
关键词:vuejsvxe-table

学下一个vue开发应用:实例总结下vxe-table插件的使用法则

项目上有一个表格需要实现在线编辑,开始用了 element 的el-table 实现,单元格内基础情况就是监听了单击单元格切换一个span标签与input标签,复杂点的单元格使用了大量的条件判断来实现对应的编辑操作,比如下拉选,popover弹框编辑。整个表格几十列,十几条数据就已经出现了明显的卡顿,在做了诸多操作(比如el-input使用原生input替换、减少判断、减少频繁的数据切换等)之后,速度虽然有所提升,但是还是肉眼可见的卡顿,基本不可用。然后便转战vxe-table,重写了一遍这个表格。

安装:

npm install xe-utils@3 vxe-table@3

应用到项目中:

import 'xe-utils';
import VXETable from 'vxe-table';
import 'vxe-table/lib/style.css';
Vue.use(VXETable);

其实它可以按需加载来减少项目体积,但是我觉得有点麻烦就没弄,想要了解可以点击下面链接查看~ vue-table【https://xuliangzhan_admin.gitee.io/vxe-table/#/table/start/install】 按需加载。

DEMO代码:

<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.jiangweishan.com'
                    },
                    {
                        name: "css",
                        desc: '层叠样式表',
                        link: 'https://www.jiangweishan.com'
                    },
                    {
                        name: "js",
                        desc: 'JavaScript',
                        link: 'https://www.jiangweishan.com'
                    }
                ]
            }
        }
    }
</script>

大家可以运行看下效果。

实现编辑:


<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>

自定义模板:

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 style="font-size: 12px; color: #ccc">技术</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>

实时保存功能:

使用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)
    }
}

OK,差不多就这些了,大家可以试试弄下。

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/vuejs20210914a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • Web前端之家

    GoogleAdSense可以的,可以加群主,帮你搞定这事情~~...

  • s121

    GoogleAdSense好弄吗,想弄一个账号。...

  • s121

    不错,正好用到,收藏了!...

  • 访客

    什么机翻...

  • Web前端之家

    只是更轻便,还是有些差距的呢,小项目可以玩玩。...

  • ja124

    这个跟vue和react比,好些吗?...

  • Web前端之家

    OK,已经更新,谢谢!...

  • 韩涛博客

    韩涛博客的域名更换为www.hantaosec.com啦,请更新一下域名哈,谢谢。我还会继续链着咱们...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.8 Valyria