【Vue2.x】vue-treeselect修改宽度、回显

修改vue-treeSelect 组件的高度
- 方法1：CSS中的important语法，覆盖样式
- 方法2：修改组件样式文件，重新引入样式文件
修改单选的回显，显示当前选中节点以及相应父级节点
- 第一步下载源码
- 第二步修改源码
- 第三步编译源码
- 第四步将编译结果引入项目中，替换npm导入的 vue-treeselect

详细示例可在 vue-treeselect官网查看

修改vue-treeSelect 组件的高度

方法1：CSS中的important语法，覆盖样式

.treeselect-main {
  width: 204px;
  line-height: 28px;
  .vue-treeselect__placeholder {
    line-height: 28px;
  }
  .vue-treeselect__control {
    height: 28px !important;
  }
}

对应的 vue-treeselect 组件添加 class="treeselect-main"

	<Treeselect
        class="treeselect-main"
        v-model="listQuery.treeOption"
        :options="treeSelectOptions"
        :show-count="true"
        :append-to-body="true"
        z-index="9000"
        placeholder="请选择"
      />

方法2：修改组件样式文件，重新引入样式文件

在这里插入图片描述第一步：根据引入的样式文件路径，找到样式文件，复制到项目合适的样式文件夹、
第二步：根据需求修改Vue-treeselect的样式（高度）
第三步：引入修改后的样式文件

修改单选的回显，显示当前选中节点以及相应父级节点

第一步下载源码

源码下载：GitHub

第二步修改源码

找到源码中的 SingleValue.vue 组件，修改源码如下(修改 renderSingleValueLabel 的 return 结果)：

<script>
  import Input from './Input'
  import Placeholder from './Placeholder'

  export default {
    name: 'vue-treeselect--single-value',
    inject: [ 'instance' ],
    methods: {
      renderSingleValueLabel() {
        const { instance } = this
        const node = instance.selectedNodes[0]
        const customValueLabelRenderer = instance.$scopedSlots['value-label']
        return customValueLabelRenderer
          ? customValueLabelRenderer({ node })
          : node.nestedSearchLabel // todo 原值 node.label
      },
    },
    render() {
      const { instance, $parent: { renderValueContainer } } = this
      const shouldShowValue = instance.hasValue && !instance.trigger.searchQuery

      return renderValueContainer([
        shouldShowValue && (
          <div class="vue-treeselect__single-value">
            { this.renderSingleValueLabel() }
          </div>
        ),
        <Placeholder />,
        <Input ref="input" />,
      ])
    },
  }
</script>

第三步编译源码

在源码根目录下执行 npm run build-library 命令，会打包编译源码，编译完成后，在源码根目录下生成一个dist目录，dist目录下就是编译的结果。
在这里插入图片描述

第四步将编译结果引入项目中，替换npm导入的 vue-treeselect

此处以 vue-element-admin 项目为例，引入测试。将第三步编译好的 dist目录下的 js、css 等文件作为自定义组件引入项目中。
在这里插入图片描述
在 complex-table.vue 组件中引入测试

准备的测试数据 treeSelectOptions 如下：

	[
        {
          id: '1',
          label: 'a-1',
          children: [
            {
              id: '11',
              label: 'a-11'
            },
            {
              id: '12',
              label: 'a-12'
            },
            {
              id: '13',
              label: 'a-13'
            }
          ]
        },
        {
          id: '2',
          label: 'a-2',
          children: [
            {
              id: '21',
              label: 'a-21',
              children: [
                {
                  id: '211',
                  label: 'a-211'
                }
              ]
            },
            {
              id: '22',
              label: 'a-22'
            },
            {
              id: '23',
              label: 'a-23'
            }
          ]
        }
      ]