点击列表的时候输入框中出现一条数据代码

当您点击列表时，在输入框中显示该项数据的代码，可以参考下面的示例代码：

HTML代码：

<ul>
  <li v-for="item in list" @click="fillInput(item)">{{ item }}</li>
</ul>
<input type="text" v-model="inputValue">

Vue.js代码：

data() {
  return {
    list: ['数据1', '数据2', '数据3'],
    inputValue: ''
  }
},
methods: {
  fillInput(item) {
    this.inputValue = item;
  }
}

在上面的示例中，我们使用了Vue.js框架来实现点击列表项时在输入框中显示数据的功能。首先，我们使用v-for指令通过遍历list数组来渲染出列表项，然后在每个列表项上使用@click指令来监听点击事件，当用户点击某一项时，fillInput方法会被调用，并将该项数据传递给inputValue，最终在输入框中显示出来。

希望这个示例代码可以帮到您，如果您还有其他问题，请随时问我！

相关问题

点击数据列表的时候输入框中出现一条数据代码

当您点击数据列表时，在输入框中显示该项数据的代码，可以参考下面的示例代码：

HTML代码：

<ul>
  <li v-for="data in dataList" @click="fillInput(data)">{{ data.name }}</li>
</ul>
<input type="text" v-model="inputValue">

Vue.js代码：

data() {
  return {
    dataList: [
      { id: 1, name: '数据1' },
      { id: 2, name: '数据2' },
      { id: 3, name: '数据3' }
    ],
    inputValue: ''
  }
},
methods: {
  fillInput(data) {
    this.inputValue = data.name;
  }
}

在上面的示例中，我们使用了Vue.js框架来实现点击数据列表项时在输入框中显示数据的功能。首先，我们使用v-for指令通过遍历dataList数组来渲染出列表项，然后在每个列表项上使用@click指令来监听点击事件，当用户点击某一项时，fillInput方法会被调用，并将该项数据的name属性传递给inputValue，最终在输入框中显示出来。

希望这个示例代码可以帮到您，如果您还有其他问题，请随时问我！

vue2项目中对el-table表格中对输入框字段进行校验并且点击按钮新增一条数据

对于 `el-table` 表格中的输入框字段进行校验并且点击按钮新增一条数据，可以通过以下步骤实现：

1. 在表格中将要进行校验的字段设置为可编辑的输入框，并绑定一个 `v-model` 指令，用于实时获取输入框的值。

2. 在需要校验的时候，通过正则表达式或其他方式校验输入框的值是否符合要求。

3. 如果输入框的值不符合要求，可以通过 `this.$message` 提示用户输入不合法，并将输入框的值重置为之前的值或者让用户重新输入。

4. 当用户点击新增按钮时，先对输入框的值进行校验，如果校验通过，将输入框的值插入到表格数据中。

以下是一个简单的示例代码，以手机号码为例进行校验并新增数据：

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="手机号码" prop="phone">
        <template slot-scope="{ row }">
          <el-input v-model="row.phone" @blur="checkPhone(row)"></el-input>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addData">新增数据</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', phone: '13888888888' },
        { name: '李四', phone: '13999999999' },
        { name: '王五', phone: '13000000000' }
      ],
      newRecord: {
        name: '',
        phone: ''
      }
    }
  },
  methods: {
    checkPhone(row) {
      const reg = /^1[3-9]\d{9}$/ // 手机号码正则表达式
      if (!reg.test(row.phone)) {
        this.$message.error('请输入正确的手机号码')
        row.phone = '' // 重置输入框的值
      }
    },
    addData() {
      const reg = /^1[3-9]\d{9}$/ // 手机号码正则表达式
      if (this.newRecord.name && reg.test(this.newRecord.phone)) {
        this.tableData.push(this.newRecord)
        this.newRecord = {
          name: '',
          phone: ''
        }
      } else {
        this.$message.error('请输入正确的姓名和手机号码')
      }
    }
  }
}
</script>

在上面的示例代码中，当用户点击新增按钮时，先对输入框的值进行校验，如果校验通过，将输入框的值插入到表格数据中。如果校验不通过，通过 `this.$message` 提示用户输入不合法。