简单记录一下，在vue中使用layui数据表格，开发中的一些小问题
表格行点击事件触发，执行函数，函数中需要修改vue中data的数据，复制了layui官网的代码（行点击事件），通过this.data中数据项，并不好使，这里需要注意this指向问题，把函数换为箭头函数即可
get_table() {
layui.use(['table'], () => {
layui.table.render({
elem: this.$refs.dataTable,
url: 'http://work/xyz/schoolmanage/student/select.php',
where: this.datasl,
method: 'get',
height: 'full-215', //设定高度-差值
cols: [
[
{
// width: 46, type: 'checkbox', fixed: 'left'
// }, {
minWidth: 160,
title: '姓名',
field: 'name'
},
{
minWidth: 20,
title: '学号',
field: 'sex'
},
{
minWidth: 100,
title: '班级',
field: 'grade'
},
{
minWidth: 200,
title: '所属专业',
field: 'classroom'
},
{
minWidth: 103,
title: '下载次数',
field: 'hobby'
},
{
minWidth: 185,
title: '时间',
field: 'hobby'
}
]
],
page: {
layout: ['prev', 'page', 'next', 'skip', 'count', 'limit'], //组件
limits: [10, 20, 30, 50, 100, 150], //每页展示条数
limit: 10 //默认每页展示条数
},
request: {
pageName: 'page', //页码的参数名称，默认：page
limitName: 'pagesize' //每页数据量的参数名，默认：limit
},
response: {
statusCode: 1111 //规定成功状态码，table 组件默认为 0
},
parseData: function(res) {
//表格渲染前的数据预处理
return {
code: res.code, //解析接口状态
msg: res.msg, //解析提示文本,当code与statusCode不等(即失败)时提示
count: res.count, //解析数据长度
data: res.data //解析数据列表
}
}
// done: function (res) {
// done_table(res) //加载表格后的处理
// }
})
})
},
监听行单击事件，官网上
table.on('row(test)', function(obj){
console.log(obj.tr) //得到当前行元素对象
console.log(obj.data) //得到当前行数据
//obj.del(); //删除当前行
//obj.update(fields) //修改当前行数据
});
在这里，这样写要----------->箭头函数
// 监听表格单击事件
layui.table.on('row(dataTable)', obj => {
// console.log(obj.tr) //得到当前行元素对象
// console.log(obj.data) //得到当前行数)
//obj.del(); //删除当前行
//obj.update(fields) //修改当前行数据
this.goto = 2
// console.log(this.goto)
})
要注意this指向问题，
箭头函数中this指向：根据所在的环境（我再哪个环境中，this就指向谁）
普通函数中，根据调用我的人（谁调用，指向谁）
另外，在vue中使用layui数据表格，可能存在渲染问题，layui的数据渲染和vue的dom更新不同步，解决方法可以使用个定时器，vue的dom更新后再次渲染表格，如下
mounted() {
setTimeout(() => {
this.get_table()
}, 200)
},