如何用VUE在table表格中使用input输入框

如何用VUE在table表格中使用input输入框

一.背景

有这样一个需求，从后端拿数据后，要用table表格展示出数据的一些列中，有一些要自己输入，然后再传给后端。

二.代码实现

2.1.造数据

我们可以看到下面代码中的数组userList中对象的属性有userId，userName，phone，sex其中除了userName是我们要输入的，其余的是从后端拿的数据，然后再传给后端。

  data() {
    return {
      //数据集
      userList: [
        {
          userId: 1,
          userName: "",
          phone: 123,
          sex: "男",
        },
        {
          userId: 2,
          userName: "",
          phone: 456,
          sex: "女",
        },
        {
          userId: 3,
          userName: "",
          phone: 789,
          sex: "男",
        },
      ],
    };
  },复制

2.2.核心代码

我们可以通过 Scoped slot 来获取到 row行的内容，放入input输入框的v-model实现双向绑定即可。

 <template slot-scope="scope">
   <el-input placeholder="请输入姓名" v-model="scope.row.userName" clearable/>
 </template>复制

2.3.完整代码

<template>
  <div>
    <fieldset>
      <legend>如何用VUE在table表格中使用input输入框</legend>
      <el-table :data="userList" style="width: 100%">
        <el-table-column prop="userId" label="编号" width="180" />
        <el-table-column prop="userName" label="姓名" width="180">
          <template slot-scope="scope">
            <el-input
              placeholder="请输入姓名"
              v-model="scope.row.userName"
              clearable
            />
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="180" />
        <el-table-column prop="sex" label="性别" width="180" />
      </el-table>
    </fieldset>
  </div>
</template>
<script>
export default {
  created: function () {},
  data() {
    return {
      //原数据集
      userList: [
        {
          userId: 1,
          userName: "",
          phone: 123,
          sex: "男",
        },
        {
          userId: 2,
          userName: "",
          phone: 456,
          sex: "女",
        },
        {
          userId: 3,
          userName: "",
          phone: 789,
          sex: "男",
        },
      ],
    };
  },
  methods: {},
};
</script>
 
<style scoped>
fieldset {
  /* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*/
  border: 2px solid #dcdfe6;
  text-align: left;
  border-radius: 8px;
  margin: 0 auto;
  width: 50%;
}
</style>复制

三.效果

效果如下所示。