layui中一个页面显示多个表格

遇到一个页面,有近百个table表格,然后用的是layui模板引擎,整了好久,来记个笔记。
下面是写的表格模板

    <script type="text/html" id="ListTable">
       <!--start 数据表格 -->
       <div class="table_title">
        <p class="code">
          <span>流水号:{
    
    {
    
    d.run_id}}</span>
          <span>【{
    
    {
    
    d.station_name}}】</span>
        </p>
        <p class="time">发布时间:{
    
    {
    
    d.fb_time}}</p>
      </div>
      <div class="table" style="padding-right: 24px;">
        <table
          class="layui-table" style="margin-bottom:30px" lay-even="" lay-skin="row">
          <!-- lay-data="{
    
     url:'../../api/cghuTable.json', limit: 6, limits:[6]}" -->

          <thead>
            <tr>
              <th lay-data="{
    
    filed:'people',title:'申请人',width:100}" rowspan="1">申请人</th>
              <th lay-data="{
    
    field:'username',title:'张富豪',width:100}" rowspan="1">{
    
    {
    
    d.applicant}}
                <!-- 联系人 -->
              </th>
              <th lay-data="{
    
    filed:'wz_leibie,title:'物资类别',width:100}" rowspan="1">物资类别</th>
              <th lay-data="{
    
    filed:'sh_wz',title:'生活物资',width:100}" rowspan="1">{
    
    {
    
    d.wuzileibie}}</th>
              <th lay-data="{
    
    filed:'wz_leibie,title:'物资类别',width:100}" rowspan="1">物资类别</th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>
              <th></th>

            </tr>
            <tr>
              <th lay-data="{
    
    field:'gys_name',width:110}">供应商单位名称</th>
              <th lay-data="{
    
    field:'yl_name',width:95}">原料名称</th>
              <th lay-data="{
    
    field:'guige', width:75}">规格</th>
              <th lay-data="{
    
    field:'xq_num',width:100}">需求数量(单位)</th>
              <th lay-data="{
    
    field:'bj_num',width:95 }">报价数量</th>
              <th lay-data="{
    
    field:'cd_bj',width:100 }">承兑报价(1|2|3)</th>
              <th lay-data="{
    
    field:'xj_bj',width:100  }">现金报价(1|2|3)</th>
              <th lay-data="{
    
    field:'zhangqi', width:75}">账期</th>
              <th lay-data="{
    
    field:'chandi',width:75 }">产地</th>
              <th lay-data="{
    
    field:'yunfei',width:95}">万昌运费</th>
              <th lay-data="{
    
    field:'price',width:95}">选中价格</th>
              <th lay-data="{
    
    field:'fk_method',width:95}">付款方式</th>
              <th lay-data="{
    
    field:'sh_status',width:95}">审核状态</th>
              <th lay-data="{
    
    field:'explain', width:150}">未签订最低价情情况说明</th>
            </tr>
          </thead>
          <tbody>
      {
    
    {
    
    # layui.each(d.table_data,function(index,item){
    
      }}
            <tr>
              <td>{
    
    {
    
    item.gys_name}}</td>
              <td>{
    
    {
    
    item.yl_name}}</td>
              <td>{
    
    {
    
    item.guige}}</td>
              <td>{
    
    {
    
    item.xq_num}}</td>
              <td>{
    
    {
    
    item.bj_num}}</td>
              <td>{
    
    {
    
    item.cd_bj}}</td>
              <td>{
    
    {
    
    item.xj_bj}}</td>
              <td>{
    
    {
    
    item.zhangqi}}</td>
              <td>{
    
    {
    
    item.chandi}}</td>
              <td>{
    
    {
    
    item.yunfei}}</td>
              <td>{
    
    {
    
    item.price}}</td>
              <td>{
    
    {
    
    item.fk_method}}</td>
              <td>{
    
    {
    
    item.sh_status}}</td>
              <td>{
    
    {
    
    item.explain}}</td>
            </tr>
            {
    
    {
    
    #  }); }}
          </tbody>

        </table>
      </div>
      <!--end 数据表格 -->
    </script>

这个div.viewTable用于呈现渲染结果
在这里插入图片描述
在这里插入图片描述
页面效果如图:
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_45324044/article/details/107007855