1.render页面渲染
render: (h, params) => {
return [
h(
'Tooltip',
{
props: {
content: '编辑',
transfer: true,
placement: 'top',
},
style: {
marginRight: '10px',
// display: params.edtFlag ? "inline-block" : "none"
},
},
[
h('Button', {
props: {
icon: 'ios-create',
size: 'small',
},
style: {
fontSize: '18px',
color: '#2D8CF0',
},
on: {
click: (e) => {
this.handleUpdate(params.row)
},
},
}),
]
),
h(
'Tooltip',
{
props: {
content: '删除',
transfer: true,
placement: 'top',
},
style: {
marginRight: '10px',
// display: params.edtFlag === "0" ? "inline-block" : "none"
},
},
[
h('Button', {
props: {
icon: 'ios-trash',
size: 'small',
},
style: {
fontSize: '18px',
color: '#2D8CF0',
},
on: {
click: (e) => {
this.deleteCatalogue(params.row)
},
},
}),
]
),
]
},
2.watch监听
watch: {
'viewForm.datasourceId': function(oldVal, newVal) {
this.viewForm.rDsList.find((item) => {
if (item.id == this.viewForm.datasourceId) {
this.viewForm.dataSource = item.datasource
}
})
},
'jobProjectList': function(oldVal, newVal) {
if(this.jobProjectList.length>0){
this.viewForm.project = this.getValues(this.jobProjectList, this.viewForm.projectid.toString());
}
},
'viewForm.rTbList': function(oldVal, newVal) {
this.viewForm.rTbList.find((item) => {
if (item.tableId == this.viewForm.tableId) {
this.viewForm.tableName = item.tableName
}
})
},
}
3.对象拷贝
object.assign()
4.定义对象
let emptyNode = {isNull: false, name: ''};
5.定义数组
datalist: [
{ id: 'string', name: 'string' },
{ id: 'long', name: 'long' },
{ id: 'double', name: 'double' },
{ id: 'date', name: 'date' },
{ id: 'bool', name: 'bool' },
]
6.控制组件弹框显示
<Modal
v-model="viewVisible"
title="手动输入"
width="800"
class-name="vertical-center-modal"
:z-index="index"
:transfer="true"
@on-visible-change="change"
:mask-closable="false"
>
父页面 this.$refs[filter.typeFilter(cell.label).component].viewVisible = true;
7.父页面调用子页面的方法
this.$refs[filter.typeFilter(cell.label).component].init(
cell.attrs.data
);
8.vue弹框代码示例
<Modal
v-model="viewAdd"
:title="tabletitle"
:mask-closable="false"
width="400"
class-name="vertical-center-modal"
>
<Form
ref="formInline"
:model="formInline"
:label-width="80"
:rules="viewAddRules"
>
<FormItem prop="user" label="字段名称">
<Input type="text" v-model="formInline.name" placeholder="请输入">
</Input>
</FormItem>
<FormItem prop="user" label="字段类型">
<Select v-model="formInline.type" filterable :transfer="true">
<Option
v-for="item in datalist"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</Select>
</FormItem>
</Form>
<div slot="footer" style="height: 30px">
<Button type="default" @click="viewAdd = false">取消</Button>
<Button type="primary" @click="saveadd()">确定</Button>
</div>
</Modal>
9.Object.keys()
Object.keys()的用法
作用：遍历对象
返回结果：返回对象中每一项key的数组
10.子组件向父组件传值
子组件： this.$emit('modelInputComponent', obj)
this.viewVisible = false
父组件: <model-input ref="modelInputComponent" @modelInputComponent="changeTableData"></model-input>
changeTableData(obj) {
this.cell.setAttrs(
{
data: obj
},
{ deep: false } //当 options.deep 为 false 时，进行浅 merge：
);
}
11.选择框
<FormItem
label="标准库:"
prop="datasourceId"
key="datasourceId"
:labelWidth="70"
>
<Select
v-model="viewForm.datasourceId"
filterable
@on-change="rDsChange"
:transfer="true"
>
<Option
v-for="item in viewForm.rDsList"
:key="item.id.toString()"
:label="item.datasourceName"
:value="item.id.toString()"
/>
</Select>
</FormItem>
12.向后端发送请求
import * as taskApi from "./api";
saveModal() {
let params = Object.assign(this.row, this.objParams);
if (this.id) {
params.id = this.id;
taskApi.updateModel(params, res => {
if (res.data.code == 200) {
this.$Message.success("更新成功");
this.$router.push({
path: this.path
});
} else {
this.$Message.error(res.data.msg);
}
});
} else {
taskApi.addModel(params, res => {
if (res.data.code == 200) {
this.$Message.success("保存成功");
this.$router.push({
path: this.path
});
} else {
this.$Message.error(res.data.msg);
}
});
}
}
export const getDatasourceByCollectionId = (params, cb, err) => {
axios
.request({
url: `${URL}/governance/getDatasourceByCollectionId`,
method: 'get',
params,
})
.then(cb)
.catch(err)
}
13.页面跳转示例
if(!this.id&&this.generareFlag){
this.$router.push({
path: "/gov_fe/governanceModel/modellist"
});
}
routers.js
{
path: '/gov_fe/governanceModel',
name: '治理模型',
redirect: 'governanceModel',
meta: {
title: '治理模型'
},
component: Main,
children: [
{
path: 'modellist',
name: '模型列表',
meta: {
title: '二级-2',
keepAlive:true,
isBack:false,
},
component: () => import('@/view/governanceModel/modellistManagement/modellistManagement.vue')
},
{
path: 'governanceModel',
name: '模型创建',
meta: {
title: '1级'
},
component: () => import('@/view/taskManagement/addTask/addTask.vue')
},
]
},