解决element ui和iview一些样式问题

1.el-select多选时换为下拉，固定宽度和高度

.el-select__tags {
            /*flex-wrap: nowrap;*/
            /*overflow: hidden;*/
            max-height: 30px;
            max-width: none!important;
            width: 100%;
            overflow-y: auto;
            overflow-x: hidden;
}

效果

2.el-radio的文本换行显示

.el-radio__label {
            text-overflow: ellipsis;
            white-space: normal;
            line-height: 18px;
            vertical-align: middle;
            display: inline-block;
}

3.el-tree实现单选

3.1相关样式

<el-tree ref="tree"
          show-checkbox
          :check-strictly="true"   ---严格遵循父子不关联
          :data="editCBRdata"
          :props="defaultProps"
          node-key="id" 
          @node-click="handleNodeClick"
          @check-change="checkChange"
          @check="changetree">
</el-tree>

.el-tree-node{
            .is-leaf + .el-checkbox .el-checkbox__inner{
                display: inline-block;
            }
            .el-checkbox .el-checkbox__inner{
                display: none;
            }
            .el-checkbox__inner {
                 border-radius: 50%!important;
            }
        }

 3.2相关的js方法

以下方法参考Vue el-tree 如何实现单选_大灰狼丶♛的博客-优快云博客_eltree单选

第一个方法实现单选（<=1），第二个方法可以保证一直有一个选中(=1)

这里加if判断是因为改变选项时会调用两次，一次是你选中的按钮，一次是你失去选中的按钮

因为为true的时候调用了setCheckedKeys实际上就会再次调用checkChange方法，这时候你失去选中的按钮为false就不会在调用setCheckedKeys了（个人观点）

checkChange(data, checked, node) {
        if (checked) {
          this.$refs.treeForm.setCheckedKeys([data.deptid])
        }
      }

changetree(data, lst) {
        console.log('lst:  ' + JSON.stringify(lst))
        console.log(lst.checkedKeys.length)
        if (lst.checkedKeys.length == 0) {
          //这里的treeForm是你el-tree命名的ref的值
          this.$refs.treeForm.setCheckedKeys([data.deptid])
        }
        this.getRightList()
      }

4.限制日期时间（只能使用当前及以后日期）

主要是利用了picker-options的属性

                                        <el-date-picker
                                                format="yyyy-MM-dd"
                                                value-format="yyyy-MM-dd"
                                                v-model="tableItem.eta"
                                                type="date"
                                                :picker-options="pickerOptions"
                                                placeholder="选择日期">
                                        </el-date-picker>

以下是部分js代码

time参数是当前element ui所展示的所有日期，然后对当前日期进行对比，小于当前日期则禁用（8.64e7是一天中的毫秒数，如果不含则不包括今天，因为time.getTime()是从0点开始取得，今天所取得的时间一定是小于等于当前时间的）

pickerOptions: {
                  disabledDate(time) { //设置禁用的日期（8.64e7是一天中的毫秒数，如果不含则不包括今天）
                    return time.getTime() < Date.now() - 8.64e7;
                  },
                },

5.iview文本提示不换行

<Tooltip style="width: 100%" placement="top">
                    <div slot="content">
                        <span style="white-space: normal">{{item.companyName}}</span>
                    </div>
                    <div class="header">
                        <span>{{item.companyName}}</span>
                    </div>
                </Tooltip>

6.隐藏el-dialog带来的滚动条

.el-dialog__wrapper {
            overflow: hidden;
        }

7.手动添加*el-form-item

.isMust {
        .el-form-item__label {
            &::before {
                content: "* ";
                color: #ef512a;
            }
        }
    }