如圖,要設置類似這樣的格式
步驟如下:
1. 設置一個列表表格
2. 獲取數據
table.render({ elem: '#pl-list' ,id: 'pl_table' ,height: 480 ,title: 'sku列表' ,url: host + '/product/sku/listForProduct?page=1' //數據接口 ,where: _self.formData ,parseData: function(res) { return { "code": res.code, "msg": res.message, "count": res.data.total, "data": res.data.product_sku_list } } ,cols: [[ //表頭 {type:'checkbox'} ,{field: 'id', title: 'ID', width: 90} ,{field: 'product_id', hide: 'true'} ,{field: 'name', title: '商品名稱', width:120} ,{field: 'brand', title: '品牌', width:80} ,{field: 'category_name', title: '類目', width: 120} ,{title: '圖片', width:120, templet: function(d) { return `<img src=${d.image_path} />` }} ,{field: 'marking_price', title: '划線價', width: 120} ,{field: 'stock', title: '庫存', width: 120} ,{field: 'code', title: '商品編碼', width: 120} ,{field: 'service_type', title: '業務類型', width: 120} ,{field: 'status', title: '上架狀態', width: 120} ,{field: 'created_at', title: '創建時間', width: 135} ,{title: '操作', width: 135, toolbar: '#barDemo', fixed: 'right'} ]] ,page: true //開啟分頁
3. 定義barDemo
<script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit" >編輯</a> {{# if(d.status === '下架'){ }} <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">上架</a> {{# } else { }} <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">下架</a> {{# } }} </script>
4. 大致細節就是如此,詳細內容還是請查看官方文檔