例子：工具欄 當前行可編輯，連接，轉態圖標
<template>
<div class="app-container">
<!-- 篩選條件查詢start -->
<el-dialog title="篩選" class="page-dialog" :visible.sync="isFilter" width="800px" append-to-body v-dialogDrag>
<el-row class="tip">
<i></i>
<label class="txt">篩選條件</label>
</el-row>
<el-form ref="form" :inline="true" label-width="auto">
<el-col :span="12">
<el-form-item label="報價單號" prop="quotationNo">
<el-input v-model="queryParams.quotationNo" placeholder="報價單號" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="客戶" prop="customNo">
<el-select v-model="queryParams.customNo" placeholder="請選擇" clearable style="width: 120px" @change="selectCustomer">
<el-option v-for="item in customList" :key="item.customNo" :label="item.customNo" :value="item">
</el-option>
</el-select>
<el-input style="width:100px;" v-model="queryParams.customerName" placeholder="" clearable />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="登記日" prop="registrationDate">
<el-date-picker v-model="queryParams.registrationDate" type="daterange" start-placeholder="開始日期" end-placeholder="結束日期" :default-time="['00:00:00', '23:59:59']" clearable="">
</el-date-picker>
</el-form-item>
</el-col>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" icon="el-icon-search" @click="handleQuery">查詢</el-button>
<el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
</div>
</el-dialog>
<!-- 篩選條件查詢end -->
<el-row ref="tableList">
<vxe-grid ref="xGrid" id="dataTable" :columns="tableColumn" :data="tableData" :toolbar-config="tableToolbar" :height="tableHeight" :loading="loading" :edit-rules="{
quotedAmount: [
{ required: true, message: '不能為空' },
{ min: 3, max: 50, message: '名稱長度在 3 到 50 個字符' },
]
}" :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" :seq-config="{
startIndex:
(queryParams.pager.pageNumber - 1) * queryParams.pager.pageSize,
}" @toolbar-button-click="toolbarButtonClickEvent" @toolbar-tool-click="toolbarToolClickEvent" :cell-class-name="cellClassName">
<template #quotedAmount_edit="{ row }"> <vxe-input v-model="row.quotedAmount"></vxe-input> </template>
<template #status_show="{ row }">
<span :class="'status-tag '+ (row.status =='1'?'div-info':'div-warning')">{{row.statusName}}</span>
</template>
<template #pager>
<vxe-pager :current-page.sync="queryParams.pager.pageNumber" :page-size.sync="queryParams.pager.pageSize" :total="queryParams.pager.total" @page-change="handlePageChange">
</vxe-pager>
</template>
</vxe-grid>
</el-row>
</div>
</template>
<script>
import P0101QuoteEdit from "@/views/m01order/P0101QuoteEdit";
export default {
name: "P0102QuoteList",
data() {
return {
// 查詢參數
queryParams: {
pager: {
pageNumber: 1,
pageSize: 50,
pageSizes: [50, 100]
},
quotationNo: null,
customNo: null,
customerName: null,
registrationDate: null
},
customList: [],
tableData: [],
loading: false,
tableHeight: null, // 表格高度
isEdit: false,
popMode: "",
tableToolbar: {
buttons: [
{
code: "myInsert",
name: "新報價",
icon: "fa fa-plus",
status: "primary"
},
{
code: "myEdit",
name: "編輯",
icon: "fa fa-pencil-square-o"
},
{
code: "myCancel",
name: "取消",
icon: "fa fa-ban"
},
{
code: "myLunch",
name: "發起詢價",
icon: "fa fa-bars"
},
{
code: "returnOrder",
name: "轉訂單",
icon: "fa fa-retweet"
},
{
code: "print",
name: "打印並報價",
icon: "fa fa-print"
},
{
}
],
refresh: true,
export: true,
custom: true
},
tableColumn: [
{
type: "checkbox",
width: 30,
fixed: "left",
align: "center",
sortable: true
},
{
field: "quotationNo",
title: "報價單號",
showOverflow: true,
width: 120,
align: "center",
sortable: true,
cellRender: {
name: "VXETabelCellLink",
events: { click: this.linkEvent }
}
},
{
field: "customerName",
title: "客戶名稱",
showOverflow: true,
width: 200
},
{
field: "ship",
title: "船名",
showOverflow: true,
width: 80,
align: "left"
},
{
field: "port",
title: "港口",
showOverflow: true,
width: 80,
align: "center"
},
{
field: "goodNameCn",
title: "聯系人",
showOverflow: true,
width: 100,
align: "center"
},
{
field: "quotedAmount",
title: "報價金額",
showOverflow: true,
width: 100,
align: "right",
formatter: "myAmount",
editRender: { autofocus: ".vxe-input--inner" },
slots: { edit: "quotedAmount_edit" }
},
{
field: "status",
title: "狀態",
showOverflow: true,
width: 100,
align: "center",
slots: { default: "status_show" }
},
{
field: "registrant",
title: "登記人",
showOverflow: true,
width: 100,
align: "center"
},
{
field: "registrationTime",
title: "登記時間",
showOverflow: true,
width: 100,
align: "center"
}
],
quoteStatus: [],
isFilter: false
};
},
created() {
// 客戶請求
this.request({
url: "/custom/customList",
method: "post",
data: {}
}).then((res) => {
this.customList = res.data;
});
// 報價單狀態字典請求
this.request({
url: "/quote/quoteStatus",
method: "post",
data: {}
}).then((res) => {
this.quoteStatus = res.data;
});
this.loadData();
},
methods: {
// 下拉框選擇事件
selectCustomer(e) {
this.queryParams.customerName = e.customName;
},
// 篩選條件
showFilter() {
this.isFilter = true;
},
loadData() {
this.request({
url: "/quotation/quoteList",
method: "post",
data: {}
}).then((res) => {
this.tableData = res.data;
this.queryParams.pager.total = res.total;
});
},
toolbarButtonClickEvent({ code }) {
const $grid = this.$refs.xGrid;
// isEdit
switch (code) {
case "myInsert":
this.$router.push({
path: "/m01order/quoteEdit",
query: { mode: "create" }
});
break;
case "myEdit":
this.$router.push({
path: "/m01order/quoteEdit",
query: { mode: "edit", id: "" }
});
break;
case "myCancel":
break;
case "myLunch":
break;
case "returnOrder":
break;
case "returnOrder":
break;
}
},
toolbarToolClickEvent({ code }) {
const $grid = this.$refs.xGrid;
switch (code) {
case "myPrint":
$grid.print();
break;
}
},
linkEvent({ row }) {
this.popMode = "view";
this.isEdit = true;
},
// 分頁
searchEvent() {
this.queryParams.pager.pageNumber = 1;
this.loadData();
},
handlePageChange({ currentPage, pageSize }) {
this.queryParams.pager.pageNumber = currentPage;
this.queryParams.pager.pageSize = pageSize;
this.loadData();
},
handleQuery() {
this.loadData();
},
resetQuery() {
this.queryParams = {
pager: {
pageNumber: 1,
pageSize: 50,
pageSizes: [50, 100]
},
quotationNo: null,
customNo: null,
customerName: null,
registrationDate: null
};
},
quoteGoodsList() {
this.$router.push({
path: "/m01order/quoteGoodsList",
query: {}
});
},
// 給列加樣式
cellClassName({ row, rowIndex, column, columnIndex }) {
// if (
// column.property === "quoteGroup" ||
// column.property === "customSpecs" ||
// column.property === "specs"
// ) {
// return "col-geekblue";
// }
// if (column.property === "quotationNo") {
// return "col-orange";
// }
},
// 表格高度
getHeight() {
this.$nextTick(() => {
this.tableHeight =
window.innerHeight - this.$refs.searchInfo.$el.offsetHeight - 65; // 45像素title，20像素footer
});
}
},
beforeMount() {
// 滾動條的獲取
window.addEventListener("resize", this.getHeight);
},
beforeDestroy() {
window.removeEventListener("resize", this.getHeight);
},
mounted() {
// 頁面渲染完成后的回調
this.getHeight();
}
};
參考：https://vxetable.cn/#/grid/api
1. border 邊框
2. resizable 寬度可調整
3. :columns="列信息（對應data里的列數據）"
4. :toolbar-config="表格上邊的新增，刪除等操作（對應data里設置信息）"
5. size="small/medium/mini" 按鈕尺寸，上面工具會繼承
6. :data="tableData" 表格數據
7. :custom-config="{storage:true} 自定義列配置項 是否啟用 localStorage 本地保存，會將列8. 操作狀態保留在本地（需要有 id）
9. :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }" 可編輯配置項 trigger
觸發方式; mode 編輯模式(行/列）;showStatus 只對 keep-source 開啟有效，是否顯示單元格新增與修改狀態
10. @toolbar-button-click="toolbarButtonClickEvent" 只對 toolbar.buttons 配置時有效，當左側按鈕被點擊時會后觸發該事件
11. @toolbar-tool-click="toolbarToolClickEvent" 只對 toolbar.tools 配置時有效，當右側工具被點擊時會后觸發該事件
12. :height="tableHeight" tableHeightdata里設置，頁面一加載計算出來
13. :loading="loading" 頁面未加載出數據時轉圈效果
初始化數據時傳入頁碼和條數
14. :seq-config="{startIndex: (tablePage.currentPage - 1) * tablePage.pageSize}" 分頁
配合下面代碼使用（放到<vxe-grid>結束標簽的前面）：
<template #pager>
<vxe-pager :layouts="['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump', 'Total']" :current-page.sync="tablePage.currentPage" :page-size.sync="tablePage.pageSize" :total="tablePage.total" @page-change="handlePageChange">
</vxe-pager>
</template>
15. stripe 表格斑馬紋
16. :row-config="{isHover:true}" isHover鼠標滑過是否高亮
17. :edit-rules="{
goodNameEn: [
{ required: true, message: '英文名不能為空' },
{ min: 3, max: 50, message: '名稱長度在 3 到 50 個字符' }
],
count: [
{ required: true, message: '數量必須填寫' }
],
}"
正則驗證
18. getCheckboxRecords(isFull) 用於 type=checkbox，獲取當前已選中的行數據（當前列表，如果 isFull=true 則獲取全表已選中的數據）
19. sortable: true 排序
20. align: 'center' 列居左中右
21. editRender: { autofocus: ".vxe-input--inner" }, 點擊渲染表單
22. slots: { edit: "price_edit" }, 插槽，名稱（點擊行出現輸入框，結合下面代碼使用）
<template #itemRemark_edit="{ row }">
<vxe-input v-model="row.itemRemark"></vxe-input>
</template>
23. @checkbox-change="slectInfo" 復選框選中事件
24. :cell-class-name="cellClassName"
cellClassName({ row, rowIndex, column, columnIndex }) {
if (column.property === 'quoteGroup' || column.property === 'customSpecs' || column.property === 'specs') {
// if (row.sex >= '1') {
// return 'col-red'
// } else if (row.age === 26) {
// return 'col-orange'
// }
return 'col-geekblue'
}
if (column.property === 'goodCode') {
return 'col-orange'
}
},
<el-row
ref=
"tableList"
>
<vxe-grid
ref=
"xGrid"
id=
"dataTable" :
columns="
tableColumn" :
data="
tableData" :
toolbar-config="
tableToolbar" :
height="
tableHeight" :
loading="
loading" :
edit-config="{
trigger:
'click',
mode:
'row',
showStatus:
true }" :
seq-config="{
startIndex:
(
queryParams.
pager.
pageNumber -
1) *
queryParams.
pager.
pageSize,
}" @
toolbar-button-click="
toolbarButtonClickEvent" @
toolbar-tool-click="
toolbarToolClickEvent" :
cell-class-name="
cellClassName"
>
<template #
quotedAmount_edit="{
row }"
>
<vxe-input
v-model="
row.
quotedAmount"
></vxe-input>
</template>
<template #
status_show="{
row }"
>
<span :
class="
'status-tag '+ (
row.
status ==
'1'?
'div-info':
'div-warning')"
>{{
row.
statusName}}
</span>
</template>
<template #
pager
>
<vxe-pager :
current-page.
sync="
queryParams.
pager.
pageNumber" :
page-size.
sync="
queryParams.
pager.
pageSize" :
total="
queryParams.
pager.
total" @
page-change="
handlePageChange"
>
</vxe-pager>
</template>
</vxe-grid>
</el-row>
