這篇文章給大家介紹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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。