html 实现表格控制器,一个控制器的自定义方法怎么做表格渲染?

@siming 这个比较简单 稍后编辑代码

控制器 结构大概这样public function index(){}

public function selectGoodsList(){}

对应的js中 大概这样var Controller = {

index:function(){},

selectGoodsList:(){ //这里是你控制器的方法对应的js 代码请抄上面index的代码即可 其中url要改

// 初始化表格参数配置

Table.api.init({

extend: {

index_url: '你的控制器路径/selectGoodsList', //改成你控制器的路径

table: 'table-sql',

}

});

var table = $("#table");

// 初始化表格

table.bootstrapTable({

url: $.fn.bootstrapTable.defaults.extend.index_url,

pk: 'id',

sortName: 'id',

columns: [[{title:'发票名头',colspan:14,class:"taxinfo"}],

[

{checkbox: true},

//这里是数据列

{field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate,

formatter: Table.api.formatter.operate}

]

]

});

// 为表格绑定事件

Table.api.bindevent(table);

},

add:function(){},

edit:function(){},

api:{}

}

你还需要有 selectGoodsList.html的模板页//代码请抄index的模板页代码

这样就已基本实现了一个名字叫selectGoodsList的表格渲染

在 Vue2 中自定义实现一个表格组件通常需要以下步骤: 1. **创建组件**: 首先,你需要创建一个新的 Vue 组件文件,例如 `Table.vue`。在这个文件里,你可以设置模板(template),数据(data)、方法(methods)等。 ```html <template> <div class="table-container"> <table border="1"> <thead> <tr v-for="(header, index) in headers" :key="index"> <th>{{ header }}</th> </tr> </thead> <tbody> <tr v-for="(item, index) in items" :key="index"> <td v-for="(value, key) in item" :key="key">{{ value }}</td> </tr> </tbody> </table> </div> </template> <script> export default { name: 'CustomTable', props: { headers: { type: Array, required: true }, // 表头数据 items: { type: Array, required: true } // 表格数据 } } </script> <style scoped> .table-container { /* 样式可以在这里添加 */ } </style> ``` 2. **数据绑定**: 使用 `v-for`指令对表头和行进行循环渲染,将组件接收的 `headers` 和 `items` 数据绑定到对应的HTML元素上。 3. **属性绑定**: 如果有额外的属性需要传递给表格(如排序、过滤等),可以作为 prop 接收,并在组件内部处理。 4. **事件处理**: 可以在组件中定义一些自定义方法(比如点击列头进行排序),并通过 `@click` 或其他事件处理器来触发。 **相关问题--:** 1. 如何在Vue中响应式地更新表格数据? 2. 如何在CustomTable组件中添加行操作功能(如新增、删除)? 3. 如何优化自定义表格组件的性能?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值