页面的表单渲染

今天我们又来写表单的渲染啦，这次，我们用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方法，就可以达到目的了
代码如下方所示

<script>
        var table = layui.table;

        //转换静态表格
        table.init('demo', {
            height: 315 //设置高度
          , limit: 10 //注意：请务必确保 limit 参数（默认：10）是与你服务端限定的数据条数一致
            //支持所有基础参数
        });
    </script>

在之前的方法渲染和自动渲染两种方法中，数据都来源于异步的接口，而使用转换静态的方法，就会数据和页面同步输出，却仍然可以转换成动态的表格。最后看下表格的转换前后的对比吧。

来源：CSDN

作者：厚润

链接：https://blog.csdn.net/weixin_44551863/article/details/89631292