feat(unhandeled): 表格改为虚拟表格支持大数据量渲染
This commit is contained in:
woody
parent
e3f4a5bc95
commit
ff08945531
|
|
@ -39,7 +39,8 @@
|
|||
"vue-quill-editor": "^3.0.6",
|
||||
"vue-router": "3.0.6",
|
||||
"vue-tree-color": "^2.3.2",
|
||||
"vuex": "3.1.0"
|
||||
"vuex": "3.1.0",
|
||||
"vxe-table": "^3.17.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "4.4.4",
|
||||
|
|
|
|||
|
|
@ -49,161 +49,63 @@
|
|||
show-icon
|
||||
/>
|
||||
</div>
|
||||
<el-table
|
||||
<vxe-table
|
||||
ref="vxeTable"
|
||||
:data="tableData"
|
||||
stripe
|
||||
height="540px"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{ background: '#EEEEEE' }"
|
||||
@selection-change="handleSelectionChange"
|
||||
:virtual-y-config="{
|
||||
enabled: true,
|
||||
gt: 200,
|
||||
oSize: 100,
|
||||
scrollToTopOnChange: true,
|
||||
immediate: true
|
||||
}"
|
||||
:row-config="{
|
||||
keyField: 'pkId'
|
||||
|
||||
}"
|
||||
@checkbox-change="handleSelectionChange"
|
||||
@checkbox-all="handleSelectionChange"
|
||||
>
|
||||
<!-- :row-class-name="tableRowClassName"
|
||||
-->
|
||||
<el-table-column type="selection" width="55" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
min-width="200px"
|
||||
prop="orderCode"
|
||||
:label="'订单编号'"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="orderTypeVal"
|
||||
:label="'订单类型'"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
prop="memberCode"
|
||||
:label="'会员编号'"
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
prop="memberName"
|
||||
:label="'会员姓名'"
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
prop="phone"
|
||||
:label="'联系方式'"
|
||||
/>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
prop="productCode"
|
||||
:label="'产品编号'"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
prop="productName"
|
||||
:label="'产品名称'"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
prop="specsName"
|
||||
:label="'产品规格'"
|
||||
/>
|
||||
<el-table-column align="center" prop="unitName" :label="'产品单位'" />
|
||||
<el-table-column align="center" prop="quantity" :label="'产品数量'" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="isGiftVal"
|
||||
:label="'销售类型'"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="orderAmount"
|
||||
:label="'订单金额'"
|
||||
>
|
||||
<vxe-column type="checkbox" width="55" />
|
||||
<vxe-column align="center" min-width="200px" field="orderCode" title="订单编号" />
|
||||
<vxe-column align="center" width="100" field="orderTypeVal" title="订单类型" />
|
||||
<vxe-column align="center" min-width="120px" field="memberCode" title="会员编号" />
|
||||
<vxe-column align="center" min-width="120px" field="memberName" title="会员姓名" />
|
||||
<vxe-column align="center" min-width="120px" field="phone" title="联系方式" />
|
||||
<vxe-column align="center" min-width="120px" field="productCode" title="产品编号" />
|
||||
<vxe-column align="center" min-width="120px" field="productName" title="产品名称" />
|
||||
<vxe-column align="center" min-width="120px" field="specsName" title="产品规格" />
|
||||
<vxe-column align="center" min-width="120px" field="unitName" title="产品单位" />
|
||||
<vxe-column align="center" min-width="120px" field="quantity" title="产品数量" />
|
||||
<vxe-column align="center" min-width="120px" field="isGiftVal" title="销售类型" />
|
||||
<vxe-column align="center" min-width="120px" field="orderAmount" title="订单金额">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.orderAmount | numFilter }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="recName" :label="'收货人'" />
|
||||
<el-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
prop="recPhone"
|
||||
:label="'收货电话'"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
min-width="180px"
|
||||
prop="recAddress"
|
||||
:label="'收货地址'"
|
||||
>
|
||||
</vxe-column>
|
||||
<vxe-column align="center" min-width="120px" field="recName" title="收货人" />
|
||||
<vxe-column align="center" min-width="120px" field="recPhone" title="收货电话" />
|
||||
<vxe-column align="center" min-width="180px" field="recAddress" title="收货地址">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.recProvinceVal }}{{ scope.row.recCityVal
|
||||
}}{{ scope.row.recCountyVal }}{{ scope.row.recAddress }}
|
||||
{{ scope.row.recProvinceVal }}{{ scope.row.recCityVal }}{{ scope.row.recCountyVal }}{{ scope.row.recAddress }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="shippingChannelVal"
|
||||
:label="'发货类型'"
|
||||
min-width="100px"
|
||||
/>
|
||||
<el-table-column
|
||||
min-width="100px"
|
||||
align="center"
|
||||
prop="storehouseName"
|
||||
:label="'发货仓库'"
|
||||
/>
|
||||
<el-table-column
|
||||
min-width="150px"
|
||||
align="center"
|
||||
prop="payTime"
|
||||
:label="'支付日期'"
|
||||
/>
|
||||
<el-table-column
|
||||
min-width="100px"
|
||||
align="center"
|
||||
prop="orderStatusVal"
|
||||
:label="'订单状态'"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
min-width="100px"
|
||||
prop="deliveryWayVal"
|
||||
:label="'发货方式'"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
min-width="100px"
|
||||
prop="operateScopeVal"
|
||||
:label="'供应方式'"
|
||||
/>
|
||||
</vxe-column>
|
||||
<vxe-column align="center" field="shippingChannelVal" title="发货类型" min-width="100px" />
|
||||
<vxe-column align="center" min-width="100px" field="storehouseName" title="发货仓库" />
|
||||
<vxe-column align="center" min-width="150px" field="payTime" title="支付日期" />
|
||||
<vxe-column align="center" min-width="100px" field="orderStatusVal" title="订单状态" />
|
||||
<vxe-column align="center" min-width="100px" field="deliveryWayVal" title="发货方式" />
|
||||
<vxe-column align="center" min-width="100px" field="operateScopeVal" title="供应方式" />
|
||||
<vxe-column align="center" min-width="100px" field="tranTypeVal" title="运输方式" />
|
||||
<vxe-column align="center" min-width="100px" field="preSaleStatusVal" title="预售状态" />
|
||||
<vxe-column align="center" min-width="100px" field="remark" title="备注" />
|
||||
<vxe-column align="center" min-width="190px" field="creationTime" title="创建日期" />
|
||||
</vxe-table>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
min-width="100px"
|
||||
prop="tranTypeVal"
|
||||
:label="'运输方式'"
|
||||
/>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="preSaleStatusVal"
|
||||
:label="'预售状态'"
|
||||
/>
|
||||
<el-table-column
|
||||
min-width="100px"
|
||||
align="center"
|
||||
prop="remark"
|
||||
:label="'备注'"
|
||||
/>
|
||||
<el-table-column
|
||||
min-width="150px"
|
||||
align="center"
|
||||
prop="creationTime"
|
||||
:label="'创建日期'"
|
||||
/>
|
||||
</el-table>
|
||||
</div>
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
|
|
@ -832,7 +734,9 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
handleSelectionChange(selection) {
|
||||
handleSelectionChange({ checked, row }) {
|
||||
const vxeTable = this.$refs.vxeTable
|
||||
const selection = vxeTable.getCheckboxRecords()
|
||||
this.hdform.idList = selection.map((item) => item.pkId)
|
||||
this.orderIdList = selection.map((item) => item.pkOrder)
|
||||
this.multiple = !selection.length
|
||||
|
|
|
|||
|
|
@ -15,13 +15,14 @@ import 'element-ui/lib/theme-chalk/index.css'
|
|||
import '../theme/index.css'
|
||||
import locale from 'element-ui/lib/locale/lang/en' // lang i18n
|
||||
ElementUI.Dialog.props.closeOnClickModal.default = false
|
||||
|
||||
import VxeUITable from 'vxe-table'
|
||||
import 'vxe-table/lib/style.css'
|
||||
import '@/styles/index.scss' // global css
|
||||
|
||||
import dataV from '@jiaminghi/data-view'
|
||||
|
||||
Vue.use(dataV)
|
||||
|
||||
Vue.use(VxeUITable)
|
||||
import App from './App'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
|
|
|
|||
|
|
@ -44,11 +44,11 @@ module.exports = {
|
|||
},
|
||||
proxy: {
|
||||
'/prod-api': {
|
||||
target: 'http://localhost:8080/',
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'^/prod-api': ''
|
||||
}
|
||||
target: 'https://t-mana.beida666.com/',
|
||||
changeOrigin: true
|
||||
// pathRewrite: {
|
||||
// '^/prod-api': ''
|
||||
// }
|
||||
}
|
||||
}
|
||||
// proxy: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue