input type="number" ，樹形控件手風琴，el-table中selection狀態的控制和行點擊事件

input標籤type爲number時的樣式問題

只需要修改input的css即可實現箭頭的隱藏

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"]{
  -moz-appearance: textfield;
}

類似Element-UI樹形控件--手風琴模式的實現

假如在li裏v-for循環一個數組，添加點擊事件，將當前點擊的index傳入到函數裏，在函數內將index賦值到某一個變量裏。之後再html裏通過三元表達式判斷變量的值是否和index相等，來控制標籤的class或者通過v-show也可以實現。

<li v-for="(item, index) in someList" :key="index" @click="itemClicked(index)">
    名稱：{{ item.name }}
    <div v-show="itemClick == index">
        id: {{ item.id }}
    </div>
</li>

var itemClick = 99999;

function itemClicked(index) {
    if (this.itemClick !== index) {
        this.itemClick = index
    } else {
        // 這裏需要判斷是否爲相同元素第二次點擊（比如說爲了收起）
        if (this.itemClick == index) {
            this.itemClick = 99999
        } else {
            this.itemClick = index
        }
    }
}

Element-UI表格內selection是否可選的控制

可以在el-table-column內添加:selectable屬性來實現

<el-table-column type="selection" width="35" :selectable="checkSelectable"></el-table-column>

// row就是表格每一行所對應的那個對象
checkSelectable(row, index) {
    let temp = null
    for (let i = 0; i < this.nodeList.length; i++) {
        if (row.id == this.nodeList[i].parentId) {
            temp = false
            break
        } else {
          temp = true
        }
    }
    return temp
}

Element-UI表格內點擊每一行的事件

假如需要通過點擊修改該行的selection或者判斷該行的內容

首先需要在el-table內添加行元素點擊事件：@row-click="rowClick"，之後再通過函數來實現

rowClick(row, event, el) {
  // console.log(el.target.nodeName)
  // 這裏的判斷當前點擊的標籤
  if (el.target.nodeName == 'DIV') {
    // 判斷v-model中保存的數據是否規範
    if (row.nodeProgressRatio == null || row.nodeProgressRatio == 0) {
    this.$message({
      message: '請先填寫計劃佔進度比',
      type: 'warning'
    })
    } else {
      通過$ref來定位表格，來改變當前行的selection狀態
      this.$refs.nodeTable.toggleRowSelection(row)
    }
  }
}