下拉自定义

下拉表格

至于能干什么, 就看你们的想象了~~

<div id="demo1"></div>

<script>
//先渲染多选
var demo1 = xmSelect.render({
    el: '#demo1', 
    prop: {
        name: 'username',
        value: 'username',
    },
    content: `
        <table class="layui-table" lay-filter="demo">
          <thead>
            <tr>
              <th lay-data="{field:'username', width:80}">昵称</th>
              <th lay-data="{field:'experience', width:50, sort:true}">积分</th>
              <th lay-data="{field:'sign', width: 200}">签名</th>
            </tr> 
          </thead>
          <tbody>
            <tr>
              <td>贤心1</td>
              <td>66</td>
              <td>人生就像是一场修行a</td>
            </tr>
            <tr>
              <td>贤心2</td>
              <td>88</td>
              <td>人生就像是一场修行b</td>
            </tr>
            <tr>
              <td>贤心3</td>
              <td>33</td>
              <td>人生就像是一场修行c</td>
            </tr>
          </tbody>
        </table>
    `,
    height: 'auto',
})

layui.table.init('demo', {
    done: function(res){
        demo1.update({ data: res.data })
    }
}).on('row(demo)', function(obj){
    var values = demo1.getValue();
    var item = obj.data;
    var has = values.find(function(i){
        return i.username === item.username
    })
    if(has){
        demo1.delete([ item ]);
    }else{
        demo1.append([ item ]);
    }
    
})
</script>