vue2 开发记录

el-select

如何修改选择项的样式/el-select-dropdown__item 文字上下显示  

测试代码

        <div style='margin-left: 100px'>
            <!--            测试代码-->
            <el-select filterable
                       size='mini'>
                <div class='xxx-el-select'>
                    <el-option
                        v-for='item in [{key:1,des:2,value:3}]'
                        :key='item.value'
                        :label='item.key'
                        :value='item.value'>
                        <span style='margin-right: 5px;'>{{ item.key }}</span>
                        <br>
                        <span style='color: #8492a6; font-size: 12px'>{{ item.des }}</span>
                    </el-option>
                </div>
            </el-select>
        </div>

默认的样式为

可以看到设置的换行没有显示第二行的内容，原因是默认的选项的行高限制了显示，第二行内容被遮挡了。查看元素可以看到代码中是有值的。

尝试调整.el-select-dropdown__item的style

可以看到修改后其实选项是可以按照预期显示的，那么修改样式即可。

解决方法

在外套一层div，然后通过div的class xxx-el-select-select 在使用::v-deep 修改样式。

<style scoped lang='scss'>

.xxx-el-select {
    ::v-deep .el-select-dropdown__item {
        margin-bottom: 8px;
        height: auto;
        line-height: 20px !important;
    }
}



</style>

修改后的效果

filter-method 自定义搜索方法,使用示例(全部模糊搜索)

示例

测试代码

前端

<el-select
                v-model='t_value'
                multiple
                filterable
                @focus='()=>{this.filterOptions=this.options}'
                :filter-method='filterSelectMethod'
                default-first-option
                placeholder='请选择文章标签'>
                <el-option
                    v-for='item in filterOptions'
                    :key='item.value'
                    :label='item.label'
                    :value='item.value'>
                    <span style='float: left'>{{ item.label }}</span>
                    <span style='float: right; color: #8492a6; font-size: 13px'>{{ item.value }}</span>
                </el-option>
            </el-select>

@focus='()=>{this.filterOptions=this.options}'

是为了测试阶段的初始化搜索的列表

data()

// 测试代码-s
            t_value: '',
            options: [
                {
                    value: '网页',
                    label: 'HTML'
                }, {
                    value: '样式',
                    label: 'CSS'
                }, {
                    value: '代码',
                    label: 'JavaScript'
                }

            ],
            filterOptions: []
            // 测试代码-e

func

// 测试代码-s
        filterSelectMethod(queryValue) {
            if (!this.filterOptions.length) {
                // 先拷贝一份 后续基于这里搜索
                this.filterOptions = this.options;
            }
            if (!queryValue) {//搜索框没传值就重新赋值
                this.filterOptions = this.options;
                return;
            }

            this.filterOptions = [];
            this.options.length &&
            this.options.forEach((item) => {
                if (item.value.indexOf(queryValue) !== -1 || item.label.indexOf(queryValue) !== -1) {
                    this.filterOptions.push(item);//把匹配到的数据push
                }
            });

        }
        // 测试代码-e

---

element el-select multiple 封装后/多选不能回显、select多选回显之后不能正常编辑,清除 

笔者出现此错误时的使用的双向绑定方案为computed   

根据笔者的反复测试，确定更换数据的双向绑定方案为watch 实现即可解决无法编辑的问题，

实例代码，labelOptions 数据部分自行输入测试数据

<template>
    <el-select
        v-bind="$attrs"
        v-model='select_value'
        collapse-tags
        multiple
        placeholder='请选择'
        clearable>
        <el-option
            v-for='item in labelOptions'
            :key='item.id'
            :label='item.name'
            :value='item.id'>
        </el-option>
    </el-select>
</template>

<script>
import { interface_labels } from '@/api/api';

export default {
    name: 'SelectInterfaceLabels',
    inheritAttrs : false,
    props: {
        // 接受外部传入的初始选中值
        value: {
            type: Array,
            default: () => [],
            required: true
        }
    },

    data() {
        return {
            select_value: this.value,
            labelOptions: []
        };
    },
    mounted() {
    },
    watch: {
        value(newValue) {
            this.select_value = newValue;
        },
        select_value(newValue) {
            this.$emit('input', newValue);
        }
    },
    methods: {

    },




};
</script>

但是其实问题的关键在于值的双向绑定无法从子组件同步到父组件，笔者通过给父组件的中绑定值的根对象显式声明此值后修复了此问题。

例如原本你绑定饿的是

obj.xxx     其实xxx在obj中没有显式的书写出来，需要你先在对象中书写一个默认值。

即从

export default {
    name: '12',
    data() {
        return { 
           obj :{
               
           }
        };
    },
};

改为

export default {
    name: '12',
    data() {
        return { 
           obj :{
               xxx: null,
           }
        };
    },
};

6. 循环嵌套层级太深，视图不更新？

看到网上有些人说数据更新的层级太深，导致数据不更新或者更新缓慢从而导致试图不更新？

由于我没有遇到过这种情况，在我试图重现这种场景的情况下，发现并没有上述情况的发生，所以对于这一点不进行过多描述（如果有人在真实场景下遇到这种情况留个言吧）。

针对上述情况有人给出的解决方案是使用强制更新：

如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。
vm.$forceUpdate()