vxe-table中vxe-grid(高級表格)的使用方法舉例
更新時間：2024年05月11日 10:14:51 作者：Gemini_Kanon
vxe-table是一個基于vue的表格組件,下面這篇文章主要給大家介紹了關于vxe-table中vxe-grid(高級表格)的使用方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下
官網(wǎng)傳送門，廢話不多說了，經(jīng)過自己半個月左右的踩雷經(jīng)歷，發(fā)篇博客記錄一下，方便自己也方便他人。由于項目需求時間問題，前面的表格都沒看直接使用了vxe-grid高級表格，下面上代碼。
<vxe-grid
ref='xGrid'
v-bind="gridOptions"
@cell-click="cellClickEvent" //設置表格編輯方式點擊列觸發(fā)，該方法是點擊某列時觸發(fā)的方法
@edit-closed="editClosedEvent"> //當被編輯的列失去焦點時即為編輯結束，觸發(fā)該方法
<template #product_item="{ data }"> //這里是動態(tài)配置表單項productList是從后臺請求到的數(shù)據(jù)經(jīng)過處理后要渲染到option中的值，value、label
<vxe-select v-model="data.topic" placeholder="選擇項目名稱" transfer>
<vxe-option v-for="item in productList" :key="item.value" :value="item.value" :label="item.label" />
</vxe-select>
</template>
<template #operate_item="{ data }">
<vxe-button type="submit" status="primary" content="查詢" />
<vxe-button type="reset" content="重置" @click="haha(data)" /> //文檔中自帶的重置按鈕如果不攔截的話無法對自定義的表單數(shù)據(jù)進行操作，故這里需要自定義一個方法
</template>
</vxe-grid>下面是核心代碼寫在data里，js，大部分配置官網(wǎng)上都有，可以找到對應API，我就著重寫一下我踩雷的地方，代碼中會有注釋，請耐心觀看
gridOptions: {
border:true, //是否帶邊框
stripe: true, //是否帶斑馬紋
round: true, //邊框是否圓角
showHeaderOverflow: true, //表頭內(nèi)容過長時是否顯示省略號
showOverflow: true, //所有內(nèi)容過長時是否顯示省略號
keepSource: true, //是否保持原始值狀態(tài)
id: 'full_edit_1', //唯一標識，某些功能會用到，我這里沒有用到，可以忽略
rowConfig: { //行配置信息
isHover: true
},
columnConfig: { //列配置信息
resizable: true
},
printConfig: { //打印配置項，具體的看文檔吧，很詳細了，注意columns里的field要和實際數(shù)據(jù)的key對應上
columns: [
{ field: 'name' },
{ field: 'email' },
{ field: 'nickname' },
{ field: 'age' },
{ field: 'amount' }
]
},
sortConfig: { //排序配置項
trigger: 'cell',
remote: true
},
filterConfig: { //篩選配置項
remote: true
},
pagerConfig: { //配置分頁
pageSize: 15,
pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000],
layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']
},
formConfig: { //表單配置項：就是查詢條件，items中的field一定要和實體類名稱對應上，方便管理。這里只放一個input框和下拉框了，其他的自己探索吧，API里都有
titleWidth: 100,
titleAlign: 'right',
items: [
{
field: 'topic',
title: '項目名稱',
span: 4,
slots: {
default: 'product_item' //這里要和上面動態(tài)配置的表單項名稱對應
}
},
{
field: 'status',
title: '狀態(tài)',
span: 4,
folding: false,
itemRender: {
name: '$select',
options: [
{ label: '待處理', value: '待處理' },
{ label: '處理中', value: '處理中' },
{ label: '已計劃', value: '已計劃' },
{ label: '已完成', value: '已完成' },
{ label: '已關閉', value: '已關閉' }
],
props: { placeholder: '請選擇項目狀態(tài)' }
}
},
{ span: 24, align: 'center', slots: { default: 'operate_item' } } //查詢重置按鈕
]
},
toolbarConfig: { //工具欄配置項
// 這種寫法是官方文檔寫法，只會執(zhí)行API中對應的方法，若想自己實現(xiàn)按鈕功能需要自定義插槽，如下
// buttons: [
// { code: 'delete', status: 'danger', name: '直接刪除', icon: 'vxe-icon-delete' },
// ],
// 自定義插槽
slots: {
buttons: ({ row }) => {
return <el-button-group>
<el-button icon="el-icon-plus" type="primary" onClick={() => this.showDialog()}>新建工單</el-button>
<el-button icon="el-icon-delete" type="danger" onClick={() => this.$refs.xGrid.commitProxy('delete')} style="margin-left: 10px;">直接刪除</el-button>
</el-button-group>
}
},
refresh: true,
import: true,
export: true,
print: true,
zoom: true,
custom: true
},
proxyConfig: { //數(shù)據(jù)代理配置項
seq: true, // 啟用動態(tài)序號代理，每一頁的序號會根據(jù)當前頁數(shù)變化
sort: true, // 啟用排序代理，當點擊排序時會自動觸發(fā) query 行為
filter: true, // 啟用篩選代理，當點擊篩選時會自動觸發(fā) query 行為
form: true, // 啟用表單代理，當點擊表單提交按鈕時會自動觸發(fā) reload 行為
// 對應響應結果 { result: [], page: { total: 100 } }
props: {
result: 'result', // 配置響應結果列表字段
total: 'page.total' // 配置響應結果總頁數(shù)字段
},
// 只接收Promise，具體實現(xiàn)自由發(fā)揮
ajax: {
// 當點擊工具欄查詢按鈕或者手動提交指令 query或reload 時會被觸發(fā)
query: ({ page, sorts, filters, form }) => {
const queryParams = Object.assign({}, form)
// 處理排序條件
const firstSort = sorts[0]
if (firstSort) {
queryParams.sort = firstSort.property
queryParams.order = firstSort.order
}
// 處理篩選條件
filters.forEach(({ property, values }) => {
queryParams[property] = values.join(',')
})
queryParams.page = page.currentPage;
queryParams.pageSize = page.pageSize;
//自己在data中定義個baseUrl，用來訪問后臺
return XEAjax.post(`${this.baseUrl}/queryOrder`, queryParams)
},
// 當點擊工具欄刪除按鈕或者手動提交指令 delete 時會被觸發(fā)
delete: ({ body }) => {
return XEAjax.post(`${this.baseUrl}/deleteOrder`, JSON.stringify(body.removeRecords));
},
// 當點擊工具欄保存按鈕或者手動提交指令 save 時會被觸發(fā)(用自帶的添加按鈕的話會用到這個保存事件，我這里已經(jīng)自定義插槽按鈕事件了，故將該處注釋掉，而且需要實時保存的話也用不上這個按鈕)
// save: ({ body }) => {
// return XEAjax.post(`${this.baseUrl}/updateOrder`, JSON.stringify(body.updateRecords)).then(
// res => xxx
// );
// }
}
},
columns: [ //列配置：將在這里顯示數(shù)據(jù)，field要和實體類名稱對應上
{ type: 'checkbox', field: 'id', title: '工單序號' }, //多選框
{ field: 'title', title: '標題' },
{
field: 'status',
title: '狀態(tài)',
width: 95,
slots: { //該處展示自定義插槽，可以將數(shù)據(jù)封裝到想用的組件里，視覺效果更佳
default: ( {row} ) => {
if (row.status == '待處理') {
return <el-tag type="danger">{row.status}</el-tag>;
}
if (row.status == '處理中') {
return <el-tag type="warning">{row.status}</el-tag>;
}
if (row.status == '已計劃') {
return <el-tag type="info">{row.status}</el-tag>;
}
if (row.status == '已完成') {
return <el-tag>{row.status}</el-tag>;
}
if (row.status == '已關閉') {
return <el-tag type="success">{row.status}</el-tag>;
}
}
},
filters: [ //配置篩選條件，配置后表頭對應列會有篩選圖標，點開即可操作
{ label: '待處理', value: '待處理' },
{ label: '處理中', value: '處理中' },
{ label: '已計劃', value: '已計劃' },
{ label: '已完成', value: '已完成' },
{ label: '已關閉', value: '已關閉' }
],
filterMultiple: false, //篩選是否可多選
editRender: { //該處是列可編輯狀態(tài)下的編輯框，這里是一個靜態(tài)下拉框，下面有一個動態(tài)下拉框也是我踩雷的地方
name: '$select',
options: [
{ label: '待處理', value: '待處理' },
{ label: '處理中', value: '處理中' },
{ label: '已計劃', value: '已計劃' },
{ label: '已完成', value: '已完成' },
{ label: '已關閉', value: '已關閉' }
],
props: { placeholder: '請選擇工單狀態(tài)' }
}
},
{ //該列是獲取后臺數(shù)據(jù)動態(tài)渲染到頁面上的地方，踩雷好幾天
field: 'charger',
title: '負責人',
editRender: {
name: '$select',
props: {
value: [],
options: [], //用來顯示下拉框數(shù)據(jù)的地方
optionProps: { //下拉框option的配置，該處要有，否則點開下拉框選值的時候對應label不會高亮
value: 'value',
label: 'label'
},
multiple: true, //可多選
clearable: true,
placeholder: '請選擇負責人',
optionConfig: {
useKey: true
}
}
},
formatter: this.formatCharger
},
{ //自定義插槽可以自定義事件
slots: {
default: ({ row }) => {
return <el-button type="text" onClick={() => this.handleCell(row)}>詳情</el-button>
}
}
}
],
importConfig: { //導入配置項，暫時沒用到該功能沒深入研究，API上都有
remote: true,
importMethod: this.importMethod,
types: ['xlsx'],
modes: ['insert']
},
exportConfig: { //導出配置項，暫時沒用到該功能沒深入研究，API上都有
remote: true,
exportMethod: this.exportMethod,
types: ['xlsx'],
modes: ['current', 'selected', 'all']
},
checkboxConfig: { //復選框配置項
labelField: 'id',
reserve: true,
highlight: true,
range: true
},
editRules: { //列編輯規(guī)則
charger: [
{ required: true, message: '負責人不能為空' }
]
},
editConfig: { //可編輯配置項
trigger: 'click',
mode: 'cell', //cell（單元格編輯模式）,row（行編輯模式）
showStatus: true
}
}重置按鈕方法
haha(val) {
//這里可以看到所有表單配置中的值
console.log(val);
}下面是列編輯是如果是下拉框如何請求后臺接口獲取數(shù)據(jù)，并渲染到頁面上，寫到method里，該處就是用到了上面的單元格點擊事件
//如果進頁面就請求后臺數(shù)據(jù)渲染下拉框的話，它是沒有數(shù)據(jù)的，我也在網(wǎng)上找了很多解決辦法，要么找不到，要么代碼寫的沒頭沒尾的，很不友好
//點擊列的時候判斷列屬性，如果是想要編輯的那個列再去后臺請求數(shù)據(jù)，然后以下拉框的格式返回給option就有數(shù)據(jù)了
cellClickEvent({row, column}) {
if (column.property == 'charger') {
let list = [];
// 該處是請求后臺的方法，封裝在別處了，直接用axios去請求也可
getAllTeamUser(param).then(res => {
for (let i = 0; i < res.data.length; i++) {
let obj = {};
obj.label = res.data[i].nickName;
obj.value = res.data[i].openId;
obj.key = res.data[i].openId;
list.push(obj);
}
})
column.editRender.props.options = list;
}
}下面是列編輯完后失去焦點自動保存的方法，也是寫在method里
editClosedEvent ({ row, column }) {
const $table = this.$refs.xGrid;
const field = column.property;
const cellValue = row[field];
// 判斷單元格值是否被修改
if ($table.isUpdateByRow(row, field)) {
setTimeout(() => {
VXETable.modal.message({
content: `保存成功！`,
status: 'success'
})
// 局部更新單元格為已保存狀態(tài)
$table.reloadRow(row, null, field)
// 保存數(shù)據(jù)后執(zhí)行查詢事件重新渲染表格數(shù)據(jù)，row就是你所編輯的行的數(shù)據(jù)，該處row的值是你編輯后的值
// 這里遇到一個問題是：下拉框選擇值時只能拿到其value值，不像el-select中可以同時拿到label和value的值
// 由于時間緊我這里是拿到value值到后臺數(shù)據(jù)庫查詢出其對應的lebel值再進行后續(xù)操作了，時間豐富的小伙伴可以深入研究一下
XEAjax.post(`${this.baseUrl}/updateOrder`, JSON.stringify(row)).then(
res => this.$refs.xGrid.commitProxy('query')
);
}, 300)
}
}vxe-grid 表格頭標題設置及內(nèi)容合并列項
附：vxe-grid 表格頭標題設置及內(nèi)容合并列項
1、vxe-grid 表格的高級使用： 自定義表格表頭標題動態(tài)添加，內(nèi)容列有合并項；實現(xiàn)效果如下所示：
2、vxe-grid 代碼部分設置，實現(xiàn)合并有兩種方式可以根據(jù)情況自由選定合并方式，代碼如下；
<!-- :span-method="mergeRowMethod" -->
<vxe-grid
border
ref="xGrid"
class="moz-style taskTable"
row-class-name="my-vxe-table-row"
resizable
:scroll-x="{enable: true}"
:scroll-y="{enable: true}"
:scrollToLeftOnChange="false"
:max-height="600"
:loading="table.loading"
:columns="table.columns"
:data="table.dataSource"
:edit-config="table.editConfig"
:menu-config="table.rightMenu"
:merge-cells="table.mergeCells"
@menu-click="menuClick"
@edit-closed="editClosedEvent"
@cell-click="fiveToggle"
>
<template #xh="{ row }">
<span v-if="!row.isDictType" class="bl-center">{{ row.xh }}</span>
<span v-if="row.isDictType" class="bl-left">{{ row.xh }}</span>
</template>
<template #text_edit="{ row, column }">
<vxe-input v-if="!row.isDictType" v-model="row[column.field]" :type="column.fieldtype || 'text'"></vxe-input>
</template>
<template #date_edit="{ row, column }">
<vxe-input v-model="row[column.field]" type="date" placeholder="請選擇日期時間" transfer @change="handleSubmitSave($event, row, column)"></vxe-input>
</template>
<template #list_default="{ row, column }">
<span class="bl-center"> {{ DictSearch(row, column) }} </span>
</template>
<template #list_edit="{ row, column }">
<vxe-select v-if="!row.isDictType" v-model="row[column.field]" transfer clearable :placeholder="'請選擇' + column.title">
<vxe-option v-for="(item, index) in fxList" :key="index" :value="item.value" :label="item.text"></vxe-option>
</vxe-select>
</template>
</vxe-grid> 3、js 數(shù)據(jù)設置及方法設置實現(xiàn)，如下所示：
// 數(shù)據(jù)內(nèi)容設置
data(){
return {
fxList: [],
table:{
loading: false,
mergeCells:[],
rightMenu: {
className: 'my-menus',
body: {
options: [
[
{ code: 'addRowOne', name: '新增' },
{ code: 'handleDelete', name: '刪除' },
]
]
},
},
isEdit: false,
editConfig: {
trigger: 'click',
mode: 'cell',
showIcon:false,
activeMethod : this.activeCellMethod
},
columns: [
{ title: '任務工作臺',
align: 'center',
children: [] , //注：其他表格頭設置在 children 內(nèi)設置列項即可
}
],
dataSource: [],
},
}
},
// 方法設置
// 通用行合并函數(shù)（將相同多列數(shù)據(jù)合并為一行）
mergeRowMethod({ row, _rowIndex, column, visibleData }) {
let that = this
// console.log(row, _rowIndex, column, visibleData, '_rowIndex, column, visibleData')
let col_span = that.table.columns[0].children.length || 0
if(row.isDictType == true){
return { rowspan: 1, colspan: col_span }
}
},
// 計算合并列
computMecall(dataSource, headList){
this.table.mergeCells = []
const headL = headList.length || 0
const tabal_data = dataSource
let MergeCell_row = 0
let itemMergeCell = { row: MergeCell_row, rowspan: 1, colspan: headL, col: 0 }
tabal_data.forEach((bitem, u)=>{
if(bitem.isDictType){
itemMergeCell = { row: u, rowspan: 1, colspan: headL, col: 0 }
this.table.mergeCells.push(itemMergeCell)
}
})
},
// 查字典
DictSearch(row, column) {
let res = ''
if(column.field in row){
res = row[column.field]
this.fxList.forEach(item => {
if(item.value == res){
res = item.text
}
})
}
return res
},
/********** 其他方法此處略過，具體根據(jù)項目需求設定處理即可...... *********/以上內(nèi)容僅供參考！
總結
到此這篇關于vxe-table中vxe-grid(高級表格)使用方法的文章就介紹到這了,更多相關vxe-table vxe-grid高級表格使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了解讀Vue實例的屬性及模板渲染問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue里面的el-select綁定默認值方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了vue3組件通信方式,面試題經(jīng)常會問到vue3組件間的通信方式，今天就通過實例代碼給大家詳細介紹下，對vue3組件通信相關知識感興趣的朋友一起看看吧2022-08-08
下面小編就為大家分享一篇vue2.0 axios跨域并渲染的問題解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
詳解vuex數(shù)據(jù)傳輸?shù)膬煞N方式及this.$store undefined的解決辦法
這篇文章主要介紹了vuex數(shù)據(jù)傳輸?shù)膬煞N方式 及 this.$store undefined的解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要介紹了解決VUE的對話框el-dialog點擊外部消失問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
Echarts 、 Remodal和Pikaday是我們在開發(fā)后臺管理類網(wǎng)站時常用的三個第三方組件，下面這篇文章主要給大家介紹了關于vue.js如何將echarts封裝為組件一鍵使用的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考下。2017-10-10
這篇文章主要為大家詳細介紹了Vue組件實現(xiàn)評論區(qū)功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
即便是功能強大的?Vue.js?也無法完全避免內(nèi)存泄漏的問題,內(nèi)存泄漏不僅會影響應用的性能,還可能導致瀏覽器崩潰,下面我們來看看Vue?中常見的內(nèi)存泄漏場景以及如何避免這些問題吧2024-12-12
數(shù)據(jù)代理是什么？通過一個對象代理，對另一個對象中屬性的操作，簡單就是說：可以通過?對象b?對?對象a?中的屬性進行操作，這里我學到的數(shù)據(jù)代理是用Object.defineProperty這個方法進行操作2022-11-11