zoukankan      html  css  js  c++  java
  • element 表格里的input点击回车聚焦下个input

    <template>
    <card>
    <el-table
    ref="singleTable"
    :data="tableData"
    highlight-current-row
    style=" 100%"
    tabindex="-1"
    @current-change="handleCurrentChange"
    >
    <el-table-column
    type="index"
    width="50"
    />
    <el-table-column
    property="date"
    label="日期"
    width="120"
    />

    <el-table-column
    property="name"
    label="姓名"
    width="120"
    />
    <el-table-column label="地址">
    <template slot-scope="scope">
    <el-input :ref="'mark'+scope.$index" v-model="scope.row.address" @keyup.enter.native="next" />
    </template>
    </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
    <el-button @click="setCurrent()">取消选择</el-button>
    </div>
    </card>
    </template>

    <script>
    export default {
    data() {
    return {
    tableData: [{
    date: '2016-05-02',
    name: '张三',
    address: ''
    }, {
    date: '2016-05-04',
    name: '王小虎',
    address: ''
    }, {
    date: '2016-05-01',
    name: '李四',
    address: ''
    }, {
    date: '2016-05-03',
    name: '赵六',
    address: ''
    }],
    currentRow: null
    }
    },
    methods: {
    setCurrent(row) {
    this.$refs.singleTable.setCurrentRow(row)
    },
    handleCurrentChange(val) {
    this.currentRow = val
    },
    next() {
    const len = this.tableData.length
    const val = this.currentRow
    this.tableData.forEach((v, i) => {
    if (v === val) {
    if (i < len - 1) {
    this.setCurrent(this.tableData[i + 1])
    this.$refs['mark' + (i + 1)].focus()
    } else {
    this.setCurrent(this.tableData[0])
    this.$refs['mark' + (0)].focus()
    }
    }
    })
    }
    }
    }
    </script>
  • 相关阅读:
    移动端hybrid开发复盘
    node/webpack 调试 loader 等技巧
    javascript(js)小数精度丢失的解决方案
    必经之路--买房之后需要走的流程--针对 组合贷款方式
    canvas 画半圆的两种方式
    svg path 画圆
    1.快速排序
    7.桥接设计模式
    6.适配器设计模式
    5.策略设计模式
  • 原文地址:https://www.cnblogs.com/hellofangfang/p/11006029.html
Copyright © 2011-2022 走看看