【bug记录】 layui老项目

需求: 点击弹框,弹框里是tabletable最后一列为switch 开关按钮,上面还有一个总开关按钮。总开关可控制下面所有的按钮。

问题: 点击table 里 开关,会实时更新,但是一打开页面,总开关不会刷新。

解决思路:一开始以为是页面初始化的时候没有刷新,尝试一面一加载后去刷新总开关的状态,发现使用 table.cache['xxxx'] 获取不到 table 数据。获取的数据读不出来,显示蓝色的小tips 划过提示:This value was evaluated upon firstexpanding. It may have changed since then

最终解决办法:改变完总开关状态,记得render一下,更新一下 layUi Dom就好了。vue 写多了,总会以为会自动更新呢。

<div class="layui-fluid">
	<div class="layui-row">
		<div class="layui-col-md12">
			<div class="layui-card">
				<div class="layui-card-body">
					<div class="layui-row">
						<div class="layui-col-md12">
							<div class="layui-card">
								<input type="hidden" name="countryId" id="countryId">
								<div class="layui-card-body" style="padding: 10px 0;" id="userTablePanel">
									<form class="layui-form pop-form" id="all-form" lay-filter="all-form">
										<div class="layui-btn-container btn-right">
											
											<div className="layui-form-item switch-btn"
												style="width:200px;display: flex;flex-direction:row;flex-wrap: nowrap;justify-content: center;align-items: center;">
												<label className="layui-form-label"
													style="height:30px;color:#000;font-size: 16px;">是否全部允许:label>
												<div className="layui-input-block"
													style="margin-left:10px;margin-bottom: 10px;display: flex;justify-content: center;align-items: center;">
													<input type="checkbox" id="switchAll" name="allviewStudentInfo"
														lay-skin="switch" lay-filter="all-radio" lay-text="是|否">
												div>
											div>
										div>
										<table class="layui-hide" id="user-table" lay-filter="user-table">table>

									form>
								div>
							div>
						div>
					div>
				div>
			div>
		div>
	div>

js 判断table 里子开关的状态 改变总开关的状态,

function switchBtnChange(res) {
	/* 设置按钮  */
	let flag = true
	for (let i = 0, length = res.data.length; i < res.data.length; i++) {
		if (!res.data[i].switchStatus) {
			flag = false
		}
	}
	$('#LAY_app').find('#switchAll').attr("checked", flag);// 改变总开关的状态
	form.render()  //  关键代码,render 一下就好了
}
var communityTable = table.render({
	elem: '#user-table',
	method: 'get',
	url: AjaxUrl + '/xxxxxx=' + sessionStorage.getItem("code"),
	headers: { token: Token },
	title: '信息',
	parseData: function (res) {
	//.....
	},
	done: function (res, curr, count) {
		allForm = form.render(null, 'all-form')

		switchBtnChange(res)
		// table 里 开关事件的监听
		allForm.on('switch(col-radio)', function (data) {
		//....
		});

		/* 全部设置 总开关的监听 */
		allForm.on('switch(all-radio)', function (data) {
						
			//调接口;
			// 更新 from
			form.render('checkbox', 'all-form')
		});
		},
		cols: computedCols,
});

你可能感兴趣的:(bug,layui,前端)