前言
對於表格來說，也許我們會遇到一個需求就是表格中的
單元格可編輯（效果如下圖），如果我們使用的是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": [ [ "import", { "libraryName": "vxe-table", "style": true // 樣式是否也按需加載 } ] ] }
最后這樣按需引入模塊，就可以減小體積了，在這里我們可以單獨新建一個文件用來專門存放vxe-table的使用，避免
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
來源：掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。