layui表格边框_layui表格数据复选框回显设置方法

3a2c5c47719654b2eb3ed26ac95e70d8.png

layui2.3版本,本身并不带有复选框回显功能,那么需要从源头解决此事,F12代码调试,找到与复选框关联的地方发现:

我们只需要在渲染数据回调时找到每个复选框根据数据的不同来设置回显。

layui这里有一个坑,设置class属性后会造成二次点击效果,千万不要手动修改class属性,那么应该怎么办呢?

每次**点击**其中一个复选框时都会增加一个class属性,第二次点击又会给删除:

table.render({

elem: '#LAY_table_topic',

url: '/admin/topicHandle/getTopicList',

height: 600,

done:function(result,currPage,count){//数据回调方法

var data = result.data;

data.forEach(function(value, key) {

//这里必须选择点击方法,不知为何添加layui-form-checked class属性会造成二次点击(即下次点击必须点击两下才能生效)bug,

//所有类似的手动修改class貌似都会造成二次效果

if(value.read_total > 10){

$("div[lay-id='topicList'] td .layui-form-checkbox").eq(key).click();

}

})

},

cols: [[

{ type:'checkbox'},

{ field:'id', title: '话题ID', width: 80 },

{ field:'image_url', title: '图片', width: 100 , templet:"#showPic"},

{ field:'content', title: '话题内容', width: 260 },

{ field:'read_total', title: '阅读次数', width: 100 , sort:true},

]],

id: 'topicList',

page: true

});

以上这篇layui表格数据复选框回显设置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想在 el-table 中使用框,并且在编辑页面中中的项,可以通过以下步骤实现: 1. 在 el-table-column 中添加 type 属性为 "selection",并绑定 v-model 到一个数组中,用于存储中的数据。 ``` <el-table-column type="selection" :selectable="row => !row.disabled" v-model="selectedRows"></el-table-column> ``` 2. 在数据源中添加一个属性用于标记该行数据是否已中,例如 selected。 ``` [ { name: 'John', age: 18, selected: true }, { name: 'Bob', age: 22, selected: false }, { name: 'Alice', age: 20, selected: true } ] ``` 3. 在编辑页面中,将中的数据传递给 el-table 的 selected 属性,并将数据源中 selected 属性为 true 的数据渲染为已中状态。 ``` <el-table :data="tableData" :selected="selectedRows"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column type="selection" :selectable="row => !row.disabled" v-model="selectedRows"></el-table-column> </el-table> <el-button @click="editSelected">Edit Selected</el-button> <script> export default { data() { return { tableData: [ { name: 'John', age: 18, selected: true }, { name: 'Bob', age: 22, selected: false }, { name: 'Alice', age: 20, selected: true } ], selectedRows: [] } }, methods: { editSelected() { // 处理中的数据 console.log(this.selectedRows); } } } </script> ``` 这样就能实现 el-table 表格的功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值