常用Vue方法
# 命令
安装依赖
npm install
启动服务, 热加载 默认 localhost:8080, 若8080已使用会自动找另外一个端口
npm run dev
压缩构建生产环境
npm run build
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# id替换名称
# 说明
页面数据列表中存在一列数据为jobTypeId，但是想展示需要取另外一张表中的数据来替换id与名称的关系。
原效果：
实现效果：
# 代码
# 1.定义请求后台数据方法
export function pageOssJobType (query) {
return fetch({
url: '/api/admin/OssJobType/findByPage',
method: 'post',
data: query
})
}
1
2
3
4
5
6
7
2
3
4
5
6
7
# 2.页面初始化
初始化待替换OssJobType数据列表
定义初始化数据jobType
data() {
return {
jobType: []
}
}
1
2
3
4
5
2
3
4
5
初始化方法
initJobType() {
pageOssJobType({page:1,limit:10000}).then(res => {
this.jobType = res.rows;
});
}
1
2
3
4
5
2
3
4
5
进入页面初始化
mounted() {
this.initJobType();
}
1
2
3
2
3
# 3.数据列表替换方法
页面代码
<el-table-column align="center" width="250px" label="任务类型":formatter="isJobTypeFormat">
</el-table-column>
1
2
2
方法
isJobTypeFormat(row, column) {
var temp = this.jobType;
for (var i = 0; i < temp.length; i++) {
if (row.jobTypeId == temp[i].id) return temp[i].jobTypeName;
}
}
1
2
3
4
5
6
2
3
4
5
6
# 下拉框遍历数组
# 说明
以上一标题数组为例，实现效果如下
# 代码
页面代码
<el-form-item v-if="dialogStatus=='create'" label="任务类型" prop="jobTypeId" >
<el-select placeholder="请选择任务类型" v-model="form.jobTypeId" size="small" style="margin-right:10px;width: 550px;" autocomplete="off" clearable filterable>
<el-option v-for="item in jobType" :key="item.id" :label="item.jobTypeName" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item v-else label="任务类型" prop="jobTypeId">
<el-select disabled placeholder="请选择任务类型" v-model="form.jobTypeId" size="small" style="margin-right:10px;width: 550px;" autocomplete="off" clearable filterable>
<el-option v-for="item in jobType" :key="item.id" :label="item.jobTypeName" :value="item.id"></el-option>
</el-select>
</el-form-item>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 嵌套dialog
# 说明
在点击第二层dialog时，页面出现遮罩层，如图显示偏灰色
# 代码
正常情况下，我们不建议使用嵌套的 Dialog，如果需要在页面上同时显示多个 Dialog，可以将它们平级放置。对于确实需要嵌套 Dialog 的场景，提供了append-to-body属性。将内层 Dialog 的该属性设置为 true，它就会插入至 body 元素上，从而保证内外层 Dialog 和遮罩层级关系的正确。
<template>
<el-button type="text" @click="outerVisible = true">点击打开外层 Dialog</el-button>
<el-dialog title="外层 Dialog" :visible.sync="outerVisible">
<el-dialog
width="30%"
title="内层 Dialog"
:visible.sync="innerVisible"
append-to-body>
</el-dialog>
<div slot="footer" class="dialog-footer">
<el-button @click="outerVisible = false">取 消</el-button>
<el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
</div>
</el-dialog>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# cron表达式生成插件
# 实现效果
# github代码
vue-quick-cron (opens new window)
# 表字段太长，用...缩略
el-table对于超出长度限制的文本的处理
# 效果
# 代码
只要增加show-overflow-tooltip
<el-table-column align="center" label="信息" width="200px" show-overflow-tooltip>
<template slot-scope="scope">
<span>{{scope.row.messInfo}}</span>
</template>
</el-table-column>
1
2
3
4
5
2
3
4
5
# 弹窗
# 效果
# 代码
# 页面
<!--弹出层-->
<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible":modal-append-to-body="false">
<el-form :model="form" :rules="rules" ref="form" label-width="120px">
<el-table :key='tableKey' :data="list" v-loading.body="listLoading" size="small" stripe highlight-current-row style="width:100%">
</el-table>
</el-form>
</el-dialog>
1
2
3
4
5
6
7
2
3
4
5
6
7
# JS
初始化：
dialogFormVisible: false,
函数：
handleGetMs(row) {
this.dialogFormVisible = true;
}
1
2
3
4
5
6
2
3
4
5
6
# 下拉选择框
# 传参时为数字
# 效果
原：
实现后
# 代码
由于element-ui select组件会自动匹配 传入的值 和 value值,如果相等 则显示此value所对应的label值，这里没有匹配原因则是我们绑定值是字符串 也就是 “0”，后端数据是 0 类型是number，因此加上 v-bind , ’ : '是 v-bind 简写,value的值类型就为number了，也就是:value="1"的写法就好了
<el-form-item label="任务状态" prop="jobStatus">
<el-select v-model="form.jobStatus" placeholder="请请输入任务状态">
<el-option label="启动" :value="1"></el-option>
<el-option label="暂停" :value="2"></el-option>
</el-select>
</el-form-item>
1
2
3
4
5
6
2
3
4
5
6
# 下拉框添加删除选项
# 效果
# 代码
只需增加 :clearable="true"
<el-select style="width: 200px;margin-right: 10px;" v-model="listQuery.jobStatus" placeholder="请输入任务状态" :clearable="true">
<el-option label="启动" :value="1"></el-option>
<el-option label="暂停" :value="2"></el-option>
</el-select>
1
2
3
4
2
3
4
# 标签属性拼接变量
# 效果
# 实现
变量写在${(item.app)}中
<el-select placeholder="服务名【地址】" v-model="listQuery.ossRegistryId" size="small" style="margin-right:10px;width: 250px;"
autocomplete="off" clearable filterable>
<el-option v-for="item in registryList" :key="item.id" :label="`${(item.app)}【${(item.address)}】`" :value="item.id"></el-option>
</el-select>
1
2
3
4
2
3
4
上次更新: 2023/03/14, 05:49:29