Vue高深用法

1.在enter事件中实现tab按钮事件：

1. 在每个页面上添加一个数组对象去维护页面上所有的组件。
2. 在页面上的每个text框和select框上面设置一个ref="XXX"引用。
3. 在页面上的每个text框和select框上面添加 @keyup.enter.native="selectXXX" 事件去获取下一个组件的ref 并获取焦点。

• HTML代码：

      <el-table
        :data="tableData"
        highlight-current-row
        @current-change="handleCurrentChange"
        style="width: 50%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column  prop="barcode" label="样品条码" width="180">
          <template slot-scope="scope">
            <el-input ref="scope" v-model="scope.row.barcode" placeholder="请输入样品条码"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="280">
          <template slot-scope="scope">
            <el-input
              @keyup.enter.native="searchEnterFun"
              v-model="scope.row.remark"
              placeholder="请输入备注"
            ></el-input>
          </template>
        </el-table-column>
      </el-table>

• JS 代码

<script>
export default {
  data() {
    return {
      type: true,
      tableData: [
        {
          barcode: "2016-05-02",
          remark: "王小虎",
          type: 1
        },
        {
          barcode: "2016-05-04",
          remark: "王小虎",
          type: 2
        },
      ]
    };
  },
updated(){   
        //实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，
      //  都已经完成了更新，界面已经被重新渲染好了！
      this.$refs.scope.focus();   //重新聚焦
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.type === 1) {
        return "warning-row";
      } else if (row.type === 2) {
        return "success-row";
      }
      return "";
    },
    submit() {
      // 获取阶段
      let that = this;
      console.log(that.tableData);
    },
    searchEnterFun(value) {
      // 按下回车键
      let item = { barcode: "", remark: "", type: 1 };
      this.tableData.push(item);
    },
    handleCurrentChange(currentRow,oldCurrentRow,index){
        console.log(currentRow, oldCurrentRow,index)
    }
  }
};
</script>