新增fixed布局
This commit is contained in:
@@ -48,7 +48,7 @@ layui.use('table', function() {
|
||||
//修改一些css样式, 这里虽然能够使用, 但是还是不太友好, 努力中...
|
||||
var cells = document.querySelectorAll('div[lay-id="demo"] .layui-table-cell');
|
||||
for(var i = 0 ; i < cells.length ; i++ ){
|
||||
cells[i].style.overflow = 'unset';
|
||||
//cells[i].style.overflow = 'unset';
|
||||
cells[i].style.height = 'auto';
|
||||
}
|
||||
//渲染多选
|
||||
@@ -56,6 +56,7 @@ layui.use('table', function() {
|
||||
var xm = xmSelect.render({
|
||||
el: '#XM-' + item.id,
|
||||
autoRow: true,
|
||||
model: { type: 'fixed' },
|
||||
data: [
|
||||
{name: '张三', value: 1},
|
||||
{name: '李四', value: 2},
|
||||
@@ -70,6 +71,13 @@ layui.use('table', function() {
|
||||
|
||||
});
|
||||
|
||||
//表格滚动时 重新计算位置
|
||||
document.querySelector('.layui-table-body').addEventListener('scroll', () => {
|
||||
xmSelect.get().forEach(function(item){
|
||||
item.calcPosition();
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -5,45 +5,21 @@
|
||||
<div id="demo1" class="xm-select-demo"></div>
|
||||
|
||||
<script>
|
||||
var demo1 = xmSelect.render({
|
||||
xmSelect.render({
|
||||
el: '#demo1',
|
||||
autoRow: true,
|
||||
model: {
|
||||
label: {
|
||||
type: 'search'
|
||||
},
|
||||
},
|
||||
radio: true,
|
||||
filterable: true,
|
||||
tree: {
|
||||
show: true,
|
||||
showFolderIcon: true,
|
||||
showLine: true,
|
||||
indent: 20,
|
||||
expandedKeys: [ -3 ],
|
||||
simple: true,
|
||||
clickExpand: false,
|
||||
clickCheck: false,
|
||||
strict: false
|
||||
},
|
||||
toolbar: {
|
||||
show: true,
|
||||
list: ['ALL', 'REVERSE', 'CLEAR']
|
||||
},
|
||||
filterable: true,
|
||||
data(){
|
||||
return [
|
||||
{name: '销售员', value: -1, disabled: true, children: [
|
||||
{name: '张三1', value: 1, selected: true, children: []},
|
||||
{name: '李四1', value: 2, selected: true},
|
||||
{name: '王五1', value: 3, disabled: true},
|
||||
]},
|
||||
{name: '奖品', value: -2, disabled: true, children: [
|
||||
{name: '奖品3', value: -3, children: [
|
||||
{name: '苹果3', value: 14, selected: true},
|
||||
{name: '香蕉3', value: 15},
|
||||
{name: '葡萄3', value: 16},
|
||||
]},
|
||||
{name: '苹果2', value: 4, selected: true, disabled: true},
|
||||
{name: '香蕉2', value: 5},
|
||||
{name: '葡萄2', value: 6},
|
||||
]},
|
||||
]
|
||||
},
|
||||
data: [
|
||||
{name: '张三', value: 1, selected: true},
|
||||
{name: '李四', value: 2},
|
||||
{name: '王五', value: 3},
|
||||
]
|
||||
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@@ -134,7 +134,7 @@ model: {
|
||||
}
|
||||
},
|
||||
},
|
||||
//展示类型, 下拉框形式: absolute, 直接显示模式: relative
|
||||
//展示类型, 下拉框形式: absolute, 直接显示模式: relative, 浮动布局: fixed
|
||||
type: 'absolute',
|
||||
},
|
||||
```
|
||||
@@ -258,3 +258,4 @@ xmSelect.render()后会返回一个xmSelect对象, 可以进行方法调用
|
||||
| changeExpandedKeys | 树模式下更新节点展开状态, v1.2.0 新增 | (keys: true-全部展开, false-全部关闭, 数组-展开的节点值) |
|
||||
| enable | 启用选项, disabled=false, v1.2.0 新增 | (array: 想要启用的选项数组) |
|
||||
| disable | 禁用用选项, disabled=true, v1.2.0 新增 | (array: 想要禁用的选项数组) |
|
||||
| calcPosition | fixed布局模式下重新计算位置, v1.2.2 新增 | - |
|
||||
|
||||
Reference in New Issue
Block a user