Vue中的vxe-table教程2-在线运⾏在线代码运行器
脱离Vue项⽬环境和Vue服务器，直接CDN导⼊⽂件，在线运⾏。
注意：vue、xe-utils、vxe-table必须在开头就导⼊，⽽我们⾃定义的main.js需要放在最后导⼊，这样才能把数据加载到页⾯，⽽main.css在开头或最后导⼊均可。
1. html中的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="cdn.jsdelivr/npm/vue"></script>
<script src="cdn.jsdelivr/npm/xe-utils"></script>
<script src="cdn.jsdelivr/npm/vxe-table"></script>
<!-- 使⽤ cdn 引⽤⽅式需要注意是否锁定版本，默认指向最新版本 -->
<link rel="stylesheet" href="./css/main.css">
</head>
<body>
<div id="app">
<template>
<div>
<vxe-toolbar>
<template v-slot:buttons>
<vxe-button @click="allAlign = 'left'">居左</vxe-button>
<vxe-button @click="allAlign = 'center'">居中</vxe-button>
<vxe-button @click="allAlign = 'right'">居右</vxe-button>
</template>
</vxe-toolbar>
<vxe-table
border
show-header-overflow
show-overflow
highlight-hover-row
:align="allAlign"
:data="tableData">
<vxe-table-column type="seq" width="60" title="序号"></vxe-table-column>
<vxe-table-column field="name" title="姓名"></vxe-table-column>
<vxe-table-column field="sex" title="性别"></vxe-table-column>
<vxe-table-column field="date" title="⽇期"></vxe-table-column>
<vxe-table-column field="address" title="地址"></vxe-table-column>
</vxe-table>
</div>
</template>
</div>
</body>
<script src="./js/main.js"></script>
</html>
2. main.css中的代码
@import url("cdn.jsdelivr/npm/vxe-table/lib/style.css");
.vxe-textarea--inner {
line-height: inherit;
}
3. main.js中的代码
var Main = {
data() {
return {
allAlign: "center",
tableData: []
}
},
created () {
var list = [];
for(var index = 0; index < 5; index++){
list.push({
name: 'test' + index,
role: 'developer',
sex: '男',
date: '2019-05-01',
time: 1556677810888 + index * 500,
region: 'ShenZhen',
address: 'address abc' + index
})
}
this.tableData = list
}
};
var app = new Vue(Main).$mount('#app');
4. 直接点击IDE中的浏览器图标，⽽不在⽤使⽤vue中的服务器就可显⽰页⾯，效果如图

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。