field: 'value', width: 250, title: '生产工序', templet: function (d) {
var value = d.value;
return '\n' + ' \n' + ' 开料\n' + ' 封边\n' + ' 打孔\n' + ' 自捡\n' + ' 打包\n' + ' ';
}, align: 'center'},
大概写了个示例,直接操作下拉dom对象实现显示隐藏已选的项,有帮助麻烦点个采纳【本回答右上角】,谢谢~~有其他问题可以继续交流~
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<style>
*{overflow:visible !important}
</style>
</head>
<body>
<div id="currentTablelId"></div>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<!--您的Layui代码start-->
<script type="text/javascript">
layui.use([ 'table'], function () {
var table = layui.table;
var tabledata = [{ value: '1' }, { value: '2' }];
table.render({
elem: '#currentTablelId',
url: '',
data: tabledata,
cols: [
[{
field: 'value', width: 250, title: '生成工序', templet: function (d) {
return `<select name="XKL" lay-verify="required" id="XKL">
<option value="0"></option>
<option value="1">开料</option>
<option value="2">封边</option>
<option value="3">打孔</option>
<option value="4">自检</option>
<option value="5">打包</option></select>`.replace('"' + d.value + '"', '"' + d.value +'" selected');
}
}]
],
done: function () {
var kv = {};
function updateKV() {//更新select中选中的值到字典中
kv = {};
for (var s of selects) kv[s.value] = 1;
}
function updateState() {//更新下拉选项状态
updateKV();
for (var el of selects)
for (var dd of el.dds) {
if (dd.className != 'layui-this')
dd.style.display = kv[dd.getAttribute('lay-value')] ? 'none' : 'block';
}
}
var selects = document.querySelectorAll('select[id="XKL"]');
for (var el of selects) {
var dds = el.nextElementSibling.querySelectorAll('dd');
el.dds = dds;
for (var dd of dds) {
//注册下拉容器点击事件,更新状态
dd.addEventListener('click', function () {
setTimeout(updateState, 1);
});
}
}
updateState();
}
})
});
</script>
</body>
</html>