input type="number" ，树形控件手风琴，el-table中selection状态的控制和行点击事件-优快云博客

本文链接：https://blog.youkuaiyun.com/Stark6/article/details/100075727

本文探讨了在Vue项目中使用Element-UI时，如何处理input[type='number']的样式问题，实现类似手风琴效果的树形控件，以及如何控制表格内selection的状态和监听行点击事件。通过CSS调整input的样式以隐藏箭头，利用Vue的v-for与事件处理实现手风琴效果，通过:selectable属性控制表格选择性，以及借助@row-click事件监听表格行的点击操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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)
    }
  }
}