编辑表单自定义提示
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现
vue3 代码
const onInit=($vm)=> {
gridRef=$vm
const option = gridRef.getFormOption("字段");
option.extra = {
render: (h, { }) => {
return (
<div>
<el-popover placement="top-start" title="提示" width="200" trigger="hover">
{{
reference: () => {
return (
<i style="color:#2196F3;font-size:12px;margin-left:2px"
onClick={() =>{ proxy.$message.success("提示信息"); }}
class="el-icon-warning-outline" >提示</i>);
},
default: () => {
return (
<div style="width:300px"> <div style="font-size:12px">触 Popover显示HTML元素</div> </div>
);
}
}}
</el-popover>
</div>
);
},
}
}
vue2 代码
onInit() {
const option = this.getFormOption("字段");
option.extra = {
render: (h, { }) => {
return (
<div>
<el-popover placement="top-start" title="提示" width="200" trigger="hover">
{{
reference: () => {
return (
<i style="color:#2196F3;font-size:12px;margin-left:2px"
onClick={() =>{ this.$message.success("提示信息"); }}
class="el-icon-warning-outline" >提示</i>);
},
default: () => {
return (
<div style="width:300px"> <div style="font-size:12px">触 Popover显示HTML元素</div> </div>
);
}
}}
</el-popover>
</div>
);
},
}
}