在引用的元素上设置disabled属性

Question

我使用的是Element UI的split-button，它呈现了一个额外的按钮，该按钮不在模板中。但是，我可以通过在下拉列表中设置ref="dropdown"来访问该按钮，并使用this.$refs.dropdown.$children引用它，最后循环遍历$children数组。现在，我想在这个按钮上设置超文本标记语言属性disabled，但是我似乎无法在Vue文档中找到一种简单的方法来实现这一点。

如何在引用上设置属性？

Answer 1

您可以使用vm.$el获取底层的Element，然后使用Element.querySelector选择下拉菜单的插入符号按钮。有了按钮引用，您就可以使用Element.setAttribute('disabled', '')添加disabled属性，使用Element.removeAttribute('disabled')删除它：

const btn = this.$refs.dropdown.$el.querySelector('.el-dropdown__caret-button');
if (enabled) {
  btn.removeAttribute('disabled');
} else {
  btn.setAttribute('disabled', '');
}

demo