标准表单结合VUE的玩法：

效果：

下图的展现结果为上下结构， 但是下面的表单其实是通过VUE渲染出来的。

参考：https://discuss.frappe.io/t/developer-suggestions-for-improved-ui-grid/77624

实现逻辑：

DocType设计：

选项定义：

Html

<table class="table table-bordered" id="cat-facts">
        <caption style="caption-side: top;">Cat Facts</caption>
        <thead>
            <tr class="d-flex">
                <th class="col-3">ID</th>
                <th class="col-2">Date Created</th>
                <th class="col-7">Fact</th>
            </tr>
        </thead>
        <tbody>
            <tr class="d-flex">
                <td class="col-3">111</td>
                <td class="col-2">222</td>
                <td class="col-7">{{ message }}</td>
            </tr>
        </tbody>
    </table>

js 代码：

frappe.ui.form.on('FIN TEST', {
    refresh(frm) {
        var vm = new Vue({ 
            el: "#cat-facts", 
            data: {
                message:'hello,world'
            }
        });
    }
})