使用插件xm-select
https://maplemei.gitee.io/xm-select/#/basic/radio
css样式调整
.layui-table-cell {
/*设置表格的宽高*/
height: 40px;
line-height: 40px !important;
/*layui表格滚动隐藏*/
overflow: visible;
}
div布局
<form class="layui-form" style="margin-top: 60px" lay-filter="field_config_form">
<table id="table_data" lay-filter="table_data"></table>
</form>
layui table构造
layui.use(["jquery", "table","form"], function () {
var table = layui.table,
form = layui.form;
table_data = table.render({
elem: '#table_data',
url: '/synchronousField/getFieldList',
where:{
dataSourceUuid : dataSourceUuid
},
defaultToolbar:false,
method: 'POST',
cols: [ [
{field: 'id',hide:true},
{field: 'fieldName', title: "来源数据库字段", align: 'center'},
{field: 'name', title: "目标数据库字段",align: 'center',width:400, templet: function(d){
return '<div id="XM-' + d.id + '" ></div>'
}}
] ],
height: 'full-105',
page: false,
done: function (res) {
//修改一些css样式, 这里虽然能够使用, 但是还是不太友好
//渲染多选
res.data.forEach(item => {
var xm = xmSelect.render({
el: '#XM-' + item.id,
radio: true,
style:{
width:"200px",
margin:"0",
padding:"0",
},
clickClose: true,
model:{
type:"fixed"
},
data: [
{name: '张三', value: 1},
{name: '李四', value: 2},
{name: '王五', value: 3},
]
})
item.__xm = xm;
})
}
});
});