页面的表单渲染

缺乏、安全感 2022-02-13 14:09 334阅读 0赞

今天我们又来写表单的渲染啦，这次，我们用layui方法渲染中的最后一种，叫做转换静态表格，他是转化一段已有的表格元素，无需配置数据接口，在js中指定表格元素，并简单的给表头加上自定义属性即可。  
当然，首先，我们还是要先敲好table，这个方法在HTML部分就需要比较多的代码，如下方代码所示

<table lay-filter="demo">
            <thead>
                <tr>
                    <th lay-data="{field:'username', width:100}">昵称</th>
                    <th lay-data="{field:'experience', width:80, sort:true}">积分</th>
                    <th lay-data="{field:'sign'}">签名</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>贤心1</td>
                    <td>66</td>
                    <td>人生就像是一场修行a</td>
                </tr>
                <tr>
                    <td>贤心2</td>
                    <td>88</td>
                    <td>人生就像是一场修行b</td>
                </tr>
                <tr>
                    <td>贤心3</td>
                    <td>33</td>
                    <td>人生就像是一场修行c</td>
                </tr>
            </tbody>
        </table>

如图你的页面已经存在了一段内容的表格，它由原始的table标签组成，这是需要赋予它一些动态元素，比如宽高，排序等等，  
首先，我们要在静态表格的th标签中加上lay-data=””属性，代码如图一。  
然后执行用于转化表格的js方法，就可以达到目的了  
代码如下方所示

在之前的方法渲染和自动渲染两种方法中，数据都来源于异步的接口，而使用转换静态的方法，就会数据和页面同步输出，却仍然可以转换成动态的表格。最后看下表格的转换前后的对比吧。  
![在这里插入图片描述][20190428091426592.PNG]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70]

[20190428091426592.PNG]: /images/20220213/8b46d48bc6a24bd3a9795eaa96420208.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU1MTg2Mw_size_16_color_FFFFFF_t_70]: /images/20220213/28dc81b466744f6cb3529d3b48ba4543.png