ant-design:a-cascader自适应宽度

1、给a-cascader设置一个动态的style

2、在onchage里,获取字符的个数,然后乘以每个字符的宽度,比如我这里的font-size是14px(浏览器默认值),那么就乘以14.

ant-design:a-cascader自适应宽度_第1张图片

ant-design:a-cascader自适应宽度_第2张图片

onChangeTestItemCode(value, selectedOptions) {
        this.testItemCode = value.slice(-1) + ''; //value的最后一个元素就是检测编号
        console.log(selectedOptions);
        var labels = [];
        selectedOptions.forEach(element=>{
          labels.push(element.label);
        })
        var length = labels.join('/').length;
        var num =  length * 14 ;
        this.width = num;
        this.startInterval();
      },

最终效果:

 如果下拉列表里都是中文,那么最终自适应的宽度比较合适,如果都是英文,那么自适应的宽度会比文字要宽许多,这是因为中文是按照设置的font-size占位的,但是英文要比font-size小一些。

一个中文字的宽度是多少px。

你可能感兴趣的:(ant,design,vue,vue.js,html)