vue 中怎么利用vxe-table 制作可編輯表格

這篇文章給大家介紹vue 中怎么利用vxe-table 制作可編輯表格，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

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

其實(shí)它可以按需加載來(lái)減少項(xiàng)目體積，但是我覺(jué)得有點(diǎn)麻煩就沒(méi)弄，想要了解可以點(diǎn)擊下面鏈接查看~ vue-table 按需加載

2. 基礎(chǔ)用法

<template>
    <vxe-table :align="allAlign" :data="tableData">
        <vxe-table-column type="seq" width="60"></vxe-table-column>
        <vxe-table-column field="name" title="名稱(chēng)"></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: '超文本標(biāo)記語(yǔ)言',
                        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>

以上，即可實(shí)現(xiàn)一個(gè)基礎(chǔ)表格，但是現(xiàn)在僅僅是表格展示，實(shí)現(xiàn)編輯還需要另外的配置。

3. 實(shí)現(xiàn)編輯

<template>
    <!--表格添加edit-config配置-->
    <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}">
        <!--對(duì)單元格vxe-table-column進(jìn)行改造，使用edit-render來(lái)配置編輯屬性--->
        <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. 實(shí)現(xiàn)下拉選擇

<template>
    <vxe-table border :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}">
        <!--和輸入框編輯區(qū)別僅在于edit-render的配置不同，data中新增選項(xiàng)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: '超文本標(biāo)記語(yǔ)言',
                        link: 'https://www.runoob.com/html/html-tutorial.html',
                        isShow: 1
                    }
                    // 省略一下多條數(shù)據(jù)········
                ],
                selection: [
                    {status: 1, label: '是'},
                    {status: 0, label: '否'}
                ]
            }
        }
    }
</script>

4. 自定義模板

vxe-table自定義模板是使用插槽實(shí)現(xiàn)的，可以使用<template #插槽名></template>實(shí)現(xiàn)，比如：

<vxe-table-column field="name" width="120" title="名稱(chēng)"
                  :edit-render="{name: 'input', attrs: {type: 'text'}}">
    <!--使用#header自定義表頭-->
    <template #header>
        <span>名稱(chēng)</span>
        <span >技術(shù)</span>
    </template>
    <!--使用#default自定義內(nèi)容-->
    <template #default="{row}">
        <span>技術(shù)名稱(chēng)</span>
        <span>{{row.name}}</span>
    </template>
    <!--使用#edit自定義編輯-->
    <template #edit="{row}">
        <p>技術(shù)名稱(chēng)</p>
        <input type="text" v-model="row.name" class="vxe-default-input">
    </template>
</vxe-table-column>

需要演示，所以把名稱(chēng)列做成了可編輯列，使用#header、#default、#edit分別自定義了列頭、默認(rèn)顯示內(nèi)容、編輯顯示內(nèi)容，如下圖：

5. 實(shí)時(shí)保存功能

使用vxe-table的edit-closed方法監(jiān)聽(tīng)編輯框關(guān)閉，調(diào)用更新接口即可實(shí)現(xiàn)。

<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 }) {
                // 后臺(tái)更新接口接受一條數(shù)據(jù)，所以傳row即可
                console.log(row);
            }
        }
    }
</script>

其實(shí)官方方法還實(shí)現(xiàn)了檢查當(dāng)前單元格內(nèi)容是否更改，不過(guò)我們這里數(shù)據(jù)結(jié)構(gòu)略復(fù)雜，源碼里的方法不太適用。 這里貼出來(lái)一下

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'
            })
            // 局部更新單元格為已保存狀態(tài)
            $table.reloadRow(row, null, field)
        }, 300)
    }
}

關(guān)于vue 中怎么利用vxe-table 制作可編輯表格就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。