Vue基本语法

1. 新建vue页面

在idea中新建一个Vue页面

<template>
//放置HTML页面
</template>

<script>
	//放置script脚本（比如一些方法啥的）
	
	import {
        //导入的方法名,
    } from "../../api/tools/python-script";
    
    export default {
        name: "python-script-management",
        data() {
        //存放变量
        }
        created() {
        //进入该页面时激活这里的方法
        }
        methods:{
        //自定义方法实现
        }
    }
</script>

<style scoped>
</style>

2. el-row和el-col

<el-row>控制的是一行的显示，<el-col>控制的是一列的显示，下列代码中是在一行中嵌入了两列，显示的前端效果如下：

<div class="search-wrap">
<el-row :gutter="32">
    <el-col :xs="24" :sm="24" :lg="12">
        <div class="search-section">
            <span class="search-label">脚本名称：</span>
            <el-input class="search-item" placeholder="请输入脚本名称(支持模糊搜索)" v-model="searchObj.scriptName"
                      clearable @keyup.enter.native="searchScript"></el-input>
        </div>
    </el-col>
    <el-col :xs="24" :sm="24" :lg="12">
        <div class="search-section">
            <span class="search-label">上传人：</span>
            <el-input class="search-item" placeholder="请输入上传人姓名(支持模糊搜索)" v-model="searchObj.createUserName"
                      clearable @keyup.enter.native="searchScript"></el-input>
        </div>
    </el-col>
</el-row>
</div>

2. 通过scope.row获取表中的一行数据

<el-table>是表格标签，<el-table-column>则控制的是表格中的一行，在<el-table>中data绑定要显示的所有数据，一般是一个List，则List中的每一项将显示为表格中的一行。

<el-table
   :data="tableList"
   v-loading="loading"
   element-loading-text="正在拼命加载中，请稍候"
   stripe
   fit
   border
   highlight-current-row
   style="width: 100%;font-size: 13px;"
   height="500px"
>
<el-table-column label="脚本名称" align="center">
    <template slot-scope="scope">
        <span>{{ scope.row.scriptName }}</span>
    </template>
</el-table-column>

<el-table-column label="操作" align="center" width="400">
<template slot-scope="scope">
    <el-button type="primary" size="mini" icon="el-icon-edit" @click="scriptEdit(scope.row)">编辑入参
    </el-button>
    <el-button type="primary" size="mini" icon="el-icon-delete" @click="scriptDownload(scope.row.id)">下载
    </el-button>
    <el-button type="primary" size="mini" icon="el-icon-delete" @click="scriptRun(scope.row.id)">运行
    </el-button>
    <el-button type="danger" size="mini" icon="el-icon-delete" @click="scriptDelete(scope.row.id)">删除
    </el-button>
</template>
</el-table-column>

3. 监听键盘响应

通过keyup.enter.native监听键盘中的 Enter 键，如果该键被点击，则触发 searchScript 事件。

<el-input class="search-item" placeholder="请输入上传人姓名(支持模糊搜索)" 
v-model="searchObj.createUserName"
clearable @keyup.enter.native="searchScript"></el-input>

4. loading加载

通过v-loading指令绑定一个Boolean变量即可实现转圈加载，在其他地方通过 this.loading=true/false 可实时控制是否显示加载。（loading变量需要在data()中进行声明。）

下面控制table进行loading

<el-table
    :data="tableList"
    v-loading="loading"
    element-loading-text="正在拼命加载中，请稍候"
    stripe
    fit
    border
    highlight-current-row
    style="width: 100%;font-size: 13px;"
    height="500px"
>

全局loading不是在要loading的地方加，而是在button上加：

5. 页面跳转

this.$router.push()
描述：跳转到不同的url，这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。

this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。

scriptRun(rowId) {
	this.$router.push({path: '/test-tools/script-run-detail', query: {'id': rowId}})
},

//script-run-detail.vue
created() {
   this.getRouterParam();
},
methods: {
   getRouterParam() {
       this.routerParams = this.$route.query.id;
       if (this.routerParams !== '' && this.routerParams !== undefined) {
           this.getScriptDetailInfo(this.routerParams);
       }
    },
}

别忘了在router页面添加路由跳转的路径，这样才能知道跳转到哪个页面

{
    path: '/test-tools/script-run-detail',
    component: () => import('@/views/test-tools/script-run-detail'),
    hidden: true
},

6. 请求的参数

JSON格式的参数都会拼接在请求的后面，成为方法的query参数，而其他参数会变成data参数，

getScriptList({pageNum: this.pageNum, pageSize: this.pageSize}, this.searchObj).then(response => {
    if(response.success) {
        this.tableList = response.data.records;
        this.total = response.data.total;
        this.loading = false
    }
})

export function getScriptList(query, data) {
    return request(
        '/testTool/pythonScript/getScriptList',
        {
            method: 'post',
            params: query,
            data
        },
        'godzilla'
    )
}

7. 下拉列表

<el-select></el-select>可以实现下拉列表展示，如下面代码所示，选中某个选项后， v-model 的 searchObj.businessLine 将自动被赋值为选中选项对应的 value值。<el-option>展示的是下拉框选项，这里的选项通过后台查询存储在变量 this.businessList 中，然后通过 v-for 循环展示；其中 :label 是展示出来的标签， :value 则是每个标签对应的实际值（也是之后赋给v-model的值）。

<el-select class="search-item" v-model="searchObj.businessLine" placeholder="请选择" clearable @change="searchEv">
	<el-option
	        v-for="item in this.businessList"
	        :key="item.businessCode"
	        :label="item.businessName"
	        :value="item.businessCode"
	></el-option>
</el-select>

@change：设定选中选项后触发的方法；
clearable： 可清空选项；
filterable： 列表框可输入筛选。