编辑表单自定义按钮、按钮倒计时、按钮事件


[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中;二选一实现
vue3 代码
const conInit=($vm)=> {
    gridRef=$vm
    //自定义表单按钮
    let countdown = 10;
    const btnValue = ref("发送短信");
    const option = gridRef.getFormOption("字段");
    option.extra = {
        render: (h, {}) => {
        return (
             <div>
            <el-button type="primary" link onClick={() =>{gridRef.$message.success('选择数据')}}>
                <i class="el-icon-search">选择数据</i>
            </el-button>
            <el-button type="primary"  style="margin-left:0"  link
                onClick={() => {
                    //设置倒计时
                    var timer = setInterval(function () {
                        if (countdown > 0) {
                            btnValue.value = countdown + "(秒)";
                            countdown--;
                        } else {
                            btnValue.value = "发送短信";
                            countdown = 10;
                            clearInterval(timer);
                        }
                    }, 1000);
                }}>
                <i class="el-icon-message">{btnValue.value}</i>
            </el-button>
            <el-popover placement="top-start" title="提示" width="200" trigger="hover">
                {{
                    reference: () => {
                        return (
                        <i style="color:rgb(6 118 169);font-size:12px;margin-left:5px"
                            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>
        );
        },
    };
  
}