Show Posts
|
Pages: [1]
|
4
|
General Category / EasyUI for Vue / I have a few suggestions about 'emptyMsg'
|
on: June 08, 2019, 06:37:44 PM
|
我有两点小建议 1.'emptyMsg'的内容可以用html渲染 2.当 'loading = true' 的时候 'emptyMsg' 不要显示 ----------------------------------------------------------- I have a few suggestions. 1.I hope 'emptyMsg' can be rendered in HTML 2.When 'loading = true' I want to hide 'emptyMsg'.
|
|
|
8
|
General Category / EasyUI for Vue / datagrid component row group with pagination bug
|
on: October 26, 2018, 06:46:56 PM
|
The pageSize property is 10 but only 7 records can be displayed after adding the 'groupField' attribute. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>EasyUI for Vue</title> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/color.css"> <link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/vue.css"> <script src="http://www.jeasyui.com/node_modules/vx-easyui/vue.min.js"></script> <script src="http://www.jeasyui.com/node_modules/vx-easyui/babel-polyfill.js"></script> <script src="http://www.jeasyui.com/node_modules/vx-easyui/vx-easyui-min.js"></script> <script src="http://www.jeasyui.com/node_modules/vx-easyui/babel.min.js"></script> <style type="text/css"> body{ padding: 20px; } h2{ margin: 0 0 20px 0; } .mycontainer{ min-width: 700px; } </style> </head> <body> <div id="app"></div> <script type="text/babel"> var demopagination2={ template: ` <div> <h2>Pagination - Lazy Load</h2> <div style="margin-bottom:10px"> <Label for="c1">Pager on: </Label> <ComboBox inputId="c1" style="width:120px" :data="pageOptions" v-model="pagePosition" :editable="false" :panelStyle="{height:'auto'}"> </ComboBox> </div> <DataGrid style="height:450px" :pagination="true" :lazy="true" :data="data" :total="total" :loading="loading" :pageNumber="pageNumber" :pageSize="pageSize" groupField="group" :pagePosition="pagePosition" :pageLayout="['list','sep','first','prev','num','tpl','next','last','refresh','info']" @pageChange="onPageChange($event)"> <GridColumn field="inv" title="Inv No"></GridColumn> <GridColumn field="name" title="Name"></GridColumn> <GridColumn field="amount" title="Amount" align="right"> <template slot="body" slot-scope="scope"> <ComboBox
@filterChange="$refs.d1.closed=false" class="f-full" inputId=amount :data='[ { value: 11, text: "Mr. Nice" }, { value: 12, text: "Narco" }, { value: 13, text: "Bombasto" }, { value: 14, text: "Celeritas" }, { value: 15, text: "Magneta" }, { value: 16, text: "RubberMan" }, { value: 17, text: "Dynama" }, { value: 18, text: "Dr IQ" }, { value: 19, text: "Magma" }, { value: 20, text: "Tornado" } ]' > </ComboBox> </template> </GridColumn> <GridColumn field="price" title="Price" align="right"></GridColumn> <GridColumn field="cost" title="Cost" align="right"></GridColumn> <GridColumn field="note" title="Note"></GridColumn> <template slot="group" slot-scope="scope" > <span style="font-weight:bold"> {{scope.value}} </span> </template> </DataGrid>
<Dialog ref="d1" :title="' 新增'" iconCls="icon-add" :dialogStyle="{width:'400px',height:'200px'}" :modal="true" :closable="true" :closed="true" > <Panel :bodyStyle="{padding:'20px'}" style="height:160px"> <p>Panel Content.</p> <template slot="footer"> <div style="padding:5px"> <LinkButton iconCls="icon-add">新增</LinkButton> </div> </template> </Panel> </Dialog>
</div> `, /*$refs.d1.closed=false*/ data() { return { total: 0, pageNumber: 1, pageSize: 10, data: [], loading: false, pagePosition: "bottom", pageOptions: [ { value: "bottom", text: "Bottom" }, { value: "top", text: "Top" }, { value: "both", text: "Both" } ] }; }, created() { this.loadPage(this.pageNumber, this.pageSize); }, methods: { onPageChange(event) { this.loadPage(event.pageNumber, event.pageSize); }, loadPage(pageNumber, pageSize) { this.loading = true; setTimeout(() => { let result = this.getData(pageNumber, pageSize); this.total = result.total; this.pageNumber = result.pageNumber; this.data = result.rows; this.loading = false; }, 1000); }, getData(pageNumber, pageSize) { let total = 100000; let data = []; let start = (pageNumber - 1) * pageSize; for (let i = start + 1; i <= start + pageSize; i++) { let amount = Math.floor(Math.random() * 1000); let price = Math.floor(Math.random() * 1000); data.push({ group:'group'+i%4, inv: "Inv No " + i, name: "Name " + i, amount: amount, price: price, cost: amount * price, note: "Note " + i }); } return { total: total, pageNumber: pageNumber, pageSize: pageSize, rows: data }; } } } var app = new Vue({ el: '#app', template: `<demopagination2 class="mycontainer"></demopagination2>`, components: { demopagination2:demopagination2 } }) </script> </body> </html>
|
|
|
|