vxe-table建立可編輯表格
阿新 • • 發佈:2021-08-03
前言
對於表格來說,也許我們會遇到一個需求就是表格中的單元格可編輯
(效果如下圖),如果我們使用的是Element UI也許不太好辦,因為官方沒有可編輯的這個操作,我們有可能使用的方法就是寫一個輸入框,當點選的時候控制內容與輸入框的顯示於隱藏。今天我們介紹另一種方式就是使用vxe-table
介紹
對於介紹這裡我們引入官方的描述:一個基於 vue 的 PC 端表格元件,支援增刪改查、虛擬滾動、懶載入、快捷選單、資料校驗、樹形結構、列印匯出、表單渲染、資料分頁、虛擬列表、彈窗、自定義模板、渲染器、賊靈活的配置項、擴充套件介面等...
附上官方文件 -->請點選安裝
這裡我們推薦按需引入
,因為全域性引入會導致檔案體積過大。
全域性安裝
npm install xe-utils@3 vxe-table@3
// main.js import Vue from 'vue' import 'xe-utils' import VXETable from 'vxe-table' import 'vxe-table/lib/style.css' Vue.use(VXETable) // 給 vue 例項掛載內部物件,例如: // Vue.prototype.$XModal = VXETable.modal // Vue.prototype.$XPrint = VXETable.print // Vue.prototype.$XSaveFile = VXETable.saveFile// Vue.prototype.$XReadFile = VXETable.readFile
以上程式碼便完成了 vxe-table 的引入。但是需要注意的是,樣式檔案需要單獨引入。否則使用圖示的時候是沒有效果的喲!
按需引入
如果您使用了 babel,藉助外掛
babel-plugin-import
可以實現按需載入模組,減少檔案體積。
修改檔案 .babelrc 或 babel.config.js
module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], "plugins": [ [最後這樣按需引入模組,就可以減小體積了,在這裡我們可以單獨新建一個檔案用來專門存放vxe-table的使用,避免"import", { "libraryName": "vxe-table", "style": true // 樣式是否也按需載入 } ] ] }
main.js
中的程式碼太雜太混亂,這裡我們在src檔案下新建一個plugin
資料夾並在裡面新建一個vxeTable.js
存放以下程式碼,最後引入到main.js中即可
// src/plugin/vxeTable.js import Vue from 'vue' import XEUtils from 'xe-utils' import { // 核心 VXETable, // 功能模組 Icon, // Filter, // Menu, Edit, // Export, // Keyboard, // Validator, Header, // Footer, // 可選元件 Column, // Colgroup, // Grid, Toolbar, // Pager, Checkbox, CheckboxGroup, Radio, RadioGroup, // RadioButton, Input, Textarea, Button, Modal, Tooltip, Form, FormItem, // FormGather, Select, // Optgroup, // Option, // Switch, // List, // Pulldown, // 表格 Table } from 'vxe-table' import zhCN from 'vxe-table/lib/locale/lang/zh-CN' // 按需載入的方式預設是不帶國際化的,自定義國際化需要自行解析佔位符 '{0}',例如: VXETable.setup({ i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args) }) // 表格功能 Vue.use(Header) // .use(Footer) .use(Icon) // .use(Filter) .use(Edit) // .use(Menu) // .use(Export) // .use(Keyboard) // .use(Validator) // 可選元件 .use(Column) // .use(Colgroup) // .use(Grid) .use(Toolbar) // .use(Pager) .use(Checkbox) .use(CheckboxGroup) .use(Radio) .use(RadioGroup) // .use(RadioButton) .use(Input) .use(Textarea) .use(Button) .use(Modal) .use(Tooltip) .use(Form) .use(FormItem) // .use(FormGather) .use(Select) // .use(Optgroup) // .use(Option) // .use(Switch) // .use(List) // .use(Pulldown) // 安裝表格 .use(Table) // 給 vue 例項掛載內部物件,例如: // Vue.prototype.$XModal = VXETable.modal // Vue.prototype.$XPrint = VXETable.print // Vue.prototype.$XSaveFile = VXETable.saveFile // Vue.prototype.$XReadFile = VXETable.readFile
main.js中
// main.js import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' // 引入vxe-table所需檔案 import './plugin/vxeTable' import 'vxe-table/lib/style.css' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app')
實現過程
<template> <div> <vxe-table border resizable show-overflow highlight-hover-row ref="xTable" height="500" :data="tableData" :edit-config="{trigger: 'click', mode: 'cell'}" > <vxe-table-column type="seq" width="60" :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '請輸入'}}"></vxe-table-column> <vxe-table-column field="name" title="Name" :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '請輸入'}}"></vxe-table-column> <vxe-table-column field="sex" title="Sex" :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '請輸入'}}" ></vxe-table-column> <vxe-table-column field="age" title="Age" :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '請輸入'}}"></vxe-table-column> <vxe-table-column field="address" title="Address" show-overflow :edit-render="{name: 'input', attrs: {type: 'text', placeholder: '請輸入'}}" ></vxe-table-column> <vxe-table-column title="操作" width="100" show-overflow> <template #default="{ row }"> <vxe-button type="text" class="vxe-icon--edit-outline" @click="editEvent(row)" ></vxe-button> </template> </vxe-table-column> </vxe-table> </div> </template> <script> export default { data() { return { tableData: [ { id: 10001, name: "Test1", nickname: "T1", role: "Develop", sex: "0", sex2: ["0"], num1: 40, age: 28, address: "Shenzhen", date12: "", date13: "", }, { id: 10002, name: "Test2", nickname: "T2", role: "Designer", sex: "1", sex2: ["0", "1"], num1: 20, age: 22, address: "Guangzhou", date12: "", date13: "2020-08-20", }, { id: 10003, name: "Test3", nickname: "T3", role: "Test", sex: "0", sex2: ["1"], num1: 200, age: 32, address: "Shanghai", date12: "2020-09-10", date13: "", }, { id: 10004, name: "Test4", nickname: "T4", role: "Designer", sex: "1", sex2: ["1"], num1: 30, age: 23, address: "Shenzhen", date12: "", date13: "2020-12-04", }, ], }; }, methods: { editEvent(row) { console.log(row); }, }, }; </script>
以上是基本的表格實現程式碼,在這裡對於編輯我們只需要關注兩個屬性即可
- vxe-table ---
edit-config
- vxe-table-column ---
edit-render
配置項一:edit-config
這裡是table的一個配置項,詳情請點選
我們上面只給了兩個屬性, 一個是trigger
另一個是mode
- trigger:觸發方式 --- manual(手動觸發方式,只能用於 mode=row),click(點選觸發編輯),dblclick(雙擊觸發編輯)
- mode:編輯模式 --- cell(單元格編輯模式),row(行編輯模式)
根據實際情況進行選擇即可
配置項二:edit-render
是table-column的一個配置項,詳情請點選
我們設定了name
和attrs
- name:渲染器名稱 --- input, textarea, select,
$input
,$select
,$switch
(這裡帶$符號的是內建渲染器,不帶的是原生渲染器) 詳情請點選 - attrs:渲染的屬性
疑問
那怎麼知道我改了之後有沒有生效呢?
我就知道會這樣,來人,上圖...
從上圖我們可以看到age原來是28
, 當我們改變之後也是自動變成我們更改之後的值282222
咋實現的捏?這裡我們用了vxe-column的插槽
寫法,自定義顯示內容模板
,詳情請點選
/* 可選值 {row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, _columnIndex} 這裡我們需要的是點選當前行的資料,傳入row即可 */ <vxe-table-column title="操作" width="100" show-overflow> <template #default="{ row }"> <vxe-button type="text" class="vxe-icon--edit-outline" @click="editEvent(row)" ></vxe-button> </template> </vxe-table-column>
說明
本文首發於掘金,為作者的原創文章。轉載請附帶作者跟原文連結或本文連結。
作者:性感的小肥貓
連結:https://juejin.cn/post/6976167764587511845
來源:掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。