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