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 cha

专职

2635人浏览 · 2021-01-07 18:11:45

专职 · 2021-01-07 18:11:45 发布

脱离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="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/xe-utils"></script>
    <script src="https://cdn.jsdelivr.net/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("https://cdn.jsdelivr.net/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中的服务器就可显示页面，效果如图

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^