Element-UI Cascader多选：如何自定义+1标签文字？

Element-UI Cascader组件多选标签文字自定义

Element-UI的Cascader组件在多选模式下默认显示“+1”标签。本文介绍如何自定义这个标签文字。

方法：利用change事件回调函数操作DOM

步骤：

1. 定义change事件回调函数: 在你的组件中，为Cascader组件的change事件绑定一个回调函数：

methods: {
  handleChange(value, selectedOptions) {
    // 在这里修改DOM
  }
}

2. 在回调函数中修改DOM: 使用$nextTick确保DOM更新后执行代码，从而修改标签文字：

this.$nextTick(() => {
  const plusTag = this.$el.querySelector('.el-cascader-tags .el-tag:last-child');
  if (plusTag) {
    plusTag.innerText = `+${selectedOptions.length - this.value.length}`;
  }
});

代码解释：

• this.$el: 指向Cascader组件的根元素。
• .el-cascader-tags .el-tag:last-child: 选择Cascader多选标签中的最后一个元素（即“+1”标签）。
• innerText: 设置标签的文本内容。 我们动态计算需要显示的数字，selectedOptions.length表示已选择的选项总数，this.value.length表示Cascader组件的value属性中已有的选项数量，两者相减得到需要显示的附加选项数量。

重要提示：

• 确保你的自定义组件已正确引入到你的项目中。
• 此方法直接操作DOM，属于侵入式方法，建议在项目中谨慎使用，并考虑更优雅的解决方案，例如使用插槽等。 直接修改DOM可能会影响组件的后续更新和维护。

通过以上步骤，您可以成功自定义Element-UI Cascader组件多选模式下的标签文字，使其更符合您的应用需求。