使用Mint-ui 的Radio，最後一個元素底部出現一條線。

Mint-ui 中使用Radio，解決出現一條線的問題。

在vue中，使用mint-ui，發現默認的radio選項都是column的。因爲需要row的，所以需要轉換一下位置。

F12審查元素後，找到對應的class，爲mint-radiolist，在<style>中進行如下覆蓋樣式

.mint-radiolist {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

然後對應的元素橫過來了，但是發現radio的最後一個元素下面有條橫線，大概是這樣的

然後手動覆蓋.mint-cell的樣式發現並不起作用，搞了半天發現通過css是無法修改的，於是使用js修改。

因爲在vue中操作dom是可以使用ref的，但是這是框架提供的，不能使用ref，所以使用原生js來獲取。let a = document.querySelectorAll('.mint-cell')。這樣能夠獲取到一個a標籤的數組。

雖然只是最後一個a標籤出現了橫線，但是爲了安全起見，就把所有的a標籤都遍歷一下吧。
使用for of循環。

for (let item of a) {
   item.style.backgroundImage = 'none'
}

這樣就能夠把所有radio的橫線去掉了。

然後在mounted裏面調用一下就可以了。

hideLine() {
    // 取消選擇框的線
    let a = document.querySelectorAll('.mint-cell')
    console.log(a)
    for (let item of a) {
      item.style.backgroundImage = 'none'
    }
  }

mounted() {
	this.hideLine()
}

但是你以爲就萬無一失了嗎，並不是，如果你在頁面一開始就渲染了radio元素的話，那麼沒問題，在mounted之後就能夠把橫線去掉，但是如果是帶交互的radio，也就是說需要來回切換顯示這個元素的話，就不起作用了。

所以說，在切換的時候，需要手動調用一下這個函數，但是問題又來了，發現手動調用沒有用，懂的人應該知道，調用的時候需要在元素渲染完之後才修改這個樣式，所以需要使用vue提供的this.$nextTick()。

 this.$nextTick(() => {
   this.hideLine()
 })

這樣，就萬無一失了。