 Show Posts
|
|
Pages: 1 2 [3] 4 5 6
|
|
31
|
General Category / EasyUI for Vue / treegrid add column row-number fail
|
on: October 09, 2018, 08:09:36 PM
|
<TreeGrid :checkbox="true" :border="false" :data="menu" idField="id" treeField="name">
<GridColumn align="center" cellCss="datagrid-td-rownumber" :width="30">
<template slot="body" slot-scope="scope">
{{scope.rowIndex + 1}}
</template>
</GridColumn>
<GridColumn field="name" title="权限名称" :width="200"></GridColumn>
<GridColumn field="code" title="标识码" :width="200"></GridColumn>
<GridColumn field="remark" title="备注" :width="220"></GridColumn>
</TreeGrid>
通过控制台调试.consle.log(scope) 里面rowIndex 是undefine |
|
|
|
|
32
|
General Category / EasyUI for Vue / how to toggle 'panel' collapse or expand
|
on: October 04, 2018, 09:39:19 AM
|
How the parent component calls the subcomponent 'panel' to toggle the collapse or expand (请问下，怎么在父组件设置panel状态。折叠或者展开)
<!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 demobasic={
template: `
<div>
<h2>Basic Panel</h2>
<Panel ref="panelRef" title="Panel Title" :collapsible="true" :bodyStyle="{padding:'20px'}" style="height:200px">
<p>Panel Content.</p>
</Panel>
<LinkButton @click="toggle">折叠切换</LinkButton>
</div>
`,
methods: {
toggle() {
alert('toggle panel collapseState')
}
}
}
var app = new Vue({
el: '#app',
template: `<demobasic class="mycontainer"></demobasic>`,
components: {
demobasic:demobasic
}
})
</script>
</body>
</html>
|
|
|
|
|
33
|
General Category / EasyUI for Vue / 'messager' component custom ok text does not work properly
|
on: October 01, 2018, 09:03:31 PM
|
<!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 demointeractive={
template: `
<div>
<h2>Interactive Messager</h2>
<LinkButton @click="confirm()">Confirm</LinkButton>
<LinkButton @click="prompt()">Prompt</LinkButton>
</div>
`,
methods: {
confirm() {
this.$messager.confirm({
title: "Confirm",
msg: "Are you confirm this?",
ok: '确定',
cancel:'取消',
result: r => {
if (r) {
alert("confirmed: " + r);
}
}
});
},
prompt() {
this.$messager.prompt({
title: "Prompt",
msg: "Please type something",
result: r => {
if (r) {
alert("you type: " + r);
}
}
});
}
}
}
var app = new Vue({
el: '#app',
template: `<demointeractive class="mycontainer"></demointeractive>`,
components: {
demointeractive:demointeractive }
})
</script>
</body>
</html>
|
|
|
|
|
35
|
General Category / EasyUI for Vue / tabs Context Menu does work
|
on: September 27, 2018, 03:16:25 AM
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI for Vue</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/vue.css">
<script src="https://www.jeasyui.com/node_modules/vx-easyui/vue.min.js"></script>
<script src="https://www.jeasyui.com/node_modules/vx-easyui/babel-polyfill.js"></script>
<script src="https://www.jeasyui.com/node_modules/vx-easyui/vx-easyui-min.js"></script>
<script src="https://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 demobasic={
template: `
<div>
<h2>Basic Tabs</h2>
<Tabs style="height:250px" @contextmenu.prevent="$refs.m1.showContextMenu($event.pageX,$event.pageY)">
<TabPanel :title="'Tab1'">
<p>Tab Panel1</p>
</TabPanel>
<TabPanel :title="'Tab2'">
<p>Tab Panel2</p>
</TabPanel>
<TabPanel :title="'Tab3'">
<p>Tab Panel3</p>
</TabPanel>
<TabPanel :title="'Help'" :closable="true" iconCls="icon-help">
<p>This is the help content.</p>
</TabPanel>
</Tabs>
<Menu ref="m1">
<MenuItem text="New"></MenuItem>
<MenuItem text="Open">
<SubMenu>
<MenuItem text="Word"></MenuItem>
<MenuItem text="Excel"></MenuItem>
<MenuItem text="PowerPoint"></MenuItem>
</SubMenu>
</MenuItem>
<MenuItem text="Save" iconCls="icon-save"></MenuItem>
<MenuItem text="Print" iconCls="icon-print" :disabled="true"></MenuItem>
<MenuItem text="Exit"></MenuItem>
</Menu>
</div>
`,
}
var app = new Vue({
el: '#app',
template: `<demobasic class="mycontainer"></demobasic>`,
components: {
demobasic:demobasic
}
})
</script>
</body>
</html>
|
|
|
|
|
37
|
General Category / EasyUI for Vue / sidemenu component multiple level menu icon does not work properly
|
on: September 25, 2018, 10:29:06 PM
|
menus:[
{
text: "报表中心",
iconCls: "fa fa-wpforms",
state: "closed",
children: [
{
text: '顾客报表',
iconCls: "fa fa-wpforms",
children: [
{
text: "客户消费明细表",
code: 'report.customer.product',
},
{
text: '客户治疗明细表',
code: 'report.customer.cure'
}
]
}
]
}
]
---------------- ps:I can't upload attachments, the prompt is full |
|
|
|
|
42
|
General Category / EasyUI for Vue / I have a window component requirement
|
on: September 06, 2018, 10:59:28 PM
|
我想要实现窗口，最大化、最小化、还原、关闭等操作。jquery版有。vue版是否考虑支持 I want to implement window, maximize, minimize, restore, close, etc. The jquery version has. Does the vue version consider support? 我尝试在对话框组件中，使用slot来操作。但是会出现两个panel-tool元素 I tried to use time slots in the dialog component,But there will be two panel-tool elements <Dialog ref="d1"
:title="'Basic Dialog'"
:dialogStyle="{width:'400px',height:'200px'}"
:draggable="true"
:resizable="true"
>
<template slot="header">
<div class="panel-title">
窗口标题
</div>
<div class="panel-tool">
<a href="javascript:;" class="panel-tool-min"></a>
<a href="javascript:;" class="panel-tool-max"></a>
</div>
</template>
<p>内容</p>
</Dialog>
|
|
|
|
|
44
|
General Category / EasyUI for jQuery / use webpack4 load easyui plugins error
|
on: September 05, 2018, 04:08:41 AM
|
Before using webpack1 to load easyui plugin to use normally. now Upgrade to webpack4,strict mode. can not use `arguments.callee` jquery.validatebox.js:96 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
at jquery.validatebox.js:96
at HTMLTextAreaElement.focusEventHandler (jquery.validatebox.js:79)
at HTMLTextAreaElement.dispatch (event.js:340)
at HTMLTextAreaElement.elemData.handle (event.js:148)
|
|
|
|
|
45
|
General Category / EasyUI for Vue / Re: datagrid how to set fit or height 100%
|
on: September 04, 2018, 04:28:54 AM
|
pagination is Invisible <Layout>
<LayoutPanel region="center" style="height:100%" bodyCls="f-column">
<div class="datagrid-toolbar">
<DateBox v-model="date_start" format="yyyy-MM-dd" :panelStyle="{width:'250px', height:'250px'}" style="width:110px;"></DateBox>
</div>
<DataGrid selectionMode="single" :border="false" :data="data" :striped="true" class="f-full"
:lazy="true"
:total="total"
:loading="loading"
:pageSize="pageSize"
:pagination="true"
:pageLayout="['list','sep','first','prev','next','last','sep','refresh','info']"
@pageChange="onPageChange($event)"
>
<GridColumn align="center" cellCss="datagrid-td-rownumber" width="30">
<template slot="body" slot-scope="scope">
{{scope.rowIndex + 1}}
</template>
</GridColumn>
<GridColumn field="name" title="姓名" align="center"></GridColumn>
<GridColumn field="type" title="受理类型" :width="100" align="center"></GridColumn>
<GridColumn field="status" title="状态" :width="100" align="center"></GridColumn>
<GridColumn field="items" title="咨询项目" halign="center"></GridColumn>
<GridColumn field="date" title="受理日期" :width="100" align="center"></GridColumn>
<GridColumn field="time" title="预约时间" align="center"></GridColumn>
<GridColumn field="cometime" title="到院日期" align="center"></GridColumn>
<GridColumn field="created_at" title="录入时间" align="center"></GridColumn>
<GridColumn field="ascription" title="咨询人员" :width="100" align="center"></GridColumn>
<GridColumn field="user_id" title="录入人员" :width="100" align="center"></GridColumn>
</DataGrid>
</LayoutPanel>
</Layout>
|
|
|
|
|
