在RuoYi框架中使用lib-flexible,主要是为了自适应页面,而treeselect是一个下拉选择框的插件,使用时会受到lib-flexible的影响,导致样式错乱,可以通过以下步骤来解决:

1. 在引入lib-flexible的代码前,将treeselect的css文件引入,并给treeselect的class添加一个固定宽度的样式。例如:

<link href='/static/plugins/treeselect/treeselect.css' rel='stylesheet' type='text/css'/>
<style>
  .vue-treeselect__input { width: 200px; }
</style>
<script src='/static/plugins/jquery/jquery.min.js'></script>
<script src='/static/plugins/treeselect/treeselect.min.js'></script>
<script>/* 引入lib-flexible */</script>

2. 在treeselect的初始化代码中,将'autoWidth'属性设置为'false',避免受到lib-flexible的影响。例如:

$('.treeselect').treeselect({
  autoWidth: false,
  // 其他配置项
});

这样就可以正常使用treeselect插件了,不受lib-flexible的影响。


原文地址: https://www.cveoy.top/t/topic/oONb 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录