`<script type="text/javascript" src="<%=request.getContextPath()%>/asset/js/vue.js"> </script>
<script type="text/javascript" src="<%=request.getContextPath()%>/asset/js/vue-resource.js"></script>
<link rel="stylesheet" href="//unpkg.com/at-ui-style/css/at.min.css"> <!-- 引入组件库 --> <script src="//unpkg.com/at-ui/dist/at.min.js"></script> <style> #app { display: flex; height: 100%; justify-content: center; align-items: center; } </style> </head> <body> <div id="app"> <at-button @click="showMessage">Show message</at-button> <at-button type="primary">a</at-button> <at-button>b</at-button> <at-button type="text">c</at-button> <at-table :columns="columns3" :data="data2" sort></at-table> <at-modal v-model="modal1" title="这里是标题"> <p>{{mname}}</p> <p>{{maddress}}</p> </at-modal>
</div>
<script> var app=new Vue({ el: '#app', data: {modal1:false, mname:'', maddress:'', columns3: [ { title: '姓名', key: 'name' }, { title: '年龄', key: 'age', sortType: 'normal' }, { title: '地址', key: 'address' }, { title: '操作', render: (h, params) => { return h('div', [ h('AtButton', { props: { size: 'small', hollow: true }, style: { marginRight: '8px' }, on: { click: () => { app.$Message(params.item.name) } } }, '查看姓名'), h('AtButton', { props: { size: 'small', hollow: true }, on: { click: () => { app.mname=params.item.name; app.modal1=true; } } }, '查看地址') ]) } } ], data2: [ { name: '库里', age: 18, address: '深圳市宝安区创业一路' }, { name: '詹姆斯', age: 25, address: '广州市天河区岗顶' }, { name: '科比', age: 24, address: '上海市浦东新区' }, { name: '杜兰特', age: 22, address: '深圳市南山区深南大道' } ] } , methods: { showMessage: function () { this.$Message('Thanks for using AT-UI') }, modalPrompt :function() { this.$Modal.prompt({ title: '提示', content: '请输入邮件地址：' }).then((data) => { this.$Message(`点击了「确认」按钮，输入框的值为 ${data.value}`) }).catch(() => { this.$Message('点击了「取消」按钮') }) } } }) </script>`
937
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
