使用插件xm-select

https://maplemei.gitee.io/xm-select/#/basic/radio

css样式调整

  1. .layui-table-cell {
  2. /*设置表格的宽高*/
  3. height: 40px;
  4. line-height: 40px !important;
  5. /*layui表格滚动隐藏*/
  6. overflow: visible;
  7. }

div布局

  1. <form class="layui-form" style="margin-top: 60px" lay-filter="field_config_form">
  2. <table id="table_data" lay-filter="table_data"></table>
  3. </form>

layui table构造

  1. layui.use(["jquery", "table","form"], function () {
  2. var table = layui.table,
  3. form = layui.form;
  4. table_data = table.render({
  5. elem: '#table_data',
  6. url: '/synchronousField/getFieldList',
  7. where:{
  8. dataSourceUuid : dataSourceUuid
  9. },
  10. defaultToolbar:false,
  11. method: 'POST',
  12. cols: [ [
  13. {field: 'id',hide:true},
  14. {field: 'fieldName', title: "来源数据库字段", align: 'center'},
  15. {field: 'name', title: "目标数据库字段",align: 'center',width:400, templet: function(d){
  16. return '<div id="XM-' + d.id + '" ></div>'
  17. }}
  18. ] ],
  19. height: 'full-105',
  20. page: false,
  21. done: function (res) {
  22. //修改一些css样式, 这里虽然能够使用, 但是还是不太友好
  23. //渲染多选
  24. res.data.forEach(item => {
  25. var xm = xmSelect.render({
  26. el: '#XM-' + item.id,
  27. radio: true,
  28. style:{
  29. width:"200px",
  30. margin:"0",
  31. padding:"0",
  32. },
  33. clickClose: true,
  34. model:{
  35. type:"fixed"
  36. },
  37. data: [
  38. {name: '张三', value: 1},
  39. {name: '李四', value: 2},
  40. {name: '王五', value: 3},
  41. ]
  42. })
  43. item.__xm = xm;
  44. })
  45. }
  46. });
  47. });