vue element ui axios 基础版本demo_vue2 axios elmentui demo-优快云博客

本文链接：https://blog.youkuaiyun.com/ssllkkyyaa/article/details/108800156
<html>
<head>
    <meta charset="UTF-8">
    <!--http://localhost:6975/test/esl.html-->
    <!-- 引入样式 -->
     <!-- 引入组件vant-->
    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>-->
    <!--<script src="https://cdn.jsdelivr.net/npm/vant@2.1/lib/vant.min.js"></script>-->
<!--element-->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
      <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
      <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script> -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        el-table-column{
            width: 10px;
        }
        .table-expand {
            font-size: 0;
        }
        .table-expand label {
            width: 100px;
            color: #99a9bf;
        }
        .table-expand .el-form-item {
            margin-right: 0;
            margin-bottom: 0;
        }
        .stateOn {
            border: rgb(245, 8, 8);
        }
    </style>
</head>

<body>
<div id="app">

    <!--<br>-->
    <!--<span v-bind:title="title">&lt;!&ndash;"v-bind:"为属性指令，为vue所特有指令&ndash;&gt;-->
 {{message}}
    <!--</span>-->
    <div>正常呼叫</div>
    <el-button type="primary" @click="callAnother">刷新</el-button>
    <template>
    <el-table  :data="contents" style="width: 100%" stripe>
        <el-table-column align="center" label="事件名字" prop="Event-Name"  width="180"></el-table-column>
        <el-table-column align="center" label="Channel-State" prop="Channel-State" width="180"></el-table-column>
        <el-table-column align="center" width="180" label="Channel-Call-State" prop="Channel-Call-State" ></el-table-column>
        <el-table-column align="center" width="180" label="Answer-State" prop="Answer-State" ></el-table-column>
        <el-table-column align="center"  width="180" label="Call-Direction" prop="Call-Direction" ></el-table-column>
        <el-table-column align="center" width="180"  label="variable_current_application_data" prop="variable_current_application_data" ></el-table-column>
        <el-table-column align="center" width="180"  label="呼叫id" prop="Unique-ID" ></el-table-column>
        <el-table-column align="center" width="180"  label="from" prop="from" ></el-table-column>
    </el-table>
    </template>
</div>
</body>
<script>
    var str=[];
    var list=[];
    str[0]='hello word';
    str[1]='You loaded this page on';
    var app = new Vue({
        el: '#app',
        data: {
            message:'1111',
            title:'pageon' + new Date(),
            contents:[]
            /*通过el相应的id获取容器，通过data逐项为相应的参数赋值，所赋值可为变量（可通过ajax获取值，进行页面的渲染）*/
        },
        methods:{
            callAnother(){
                var that=this
                console.log("-----刷新");
                getMore ("http://localhost:6975/fs/eventsave").then(res => {
                    // dataSource = res.data//将请求得到的参数赋值给全局变量dataSource
                    // console.log(res);
                    if(res.data.data.list&&res.data.data.list.length>0){
                    that.contents=res.data.data.list
                    this.message="55555"
                    console.log(" contents=")
                        console.log(that.contents)
                    }
                } ).catch(error => {
                    console.log(error)
                })
            }
        }
    })
    function getMore (url, data) {
        return axios({
            // methods: 'post',//若无此项，默认get
            url: url,
            data: data//get-params
        })
    }
</script>
</html>