首页 前端知识 如何用VUE在table表格中使用input输入框

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

2024-05-12 00:05:25 前端知识 前端哥 823 732 我要收藏

如何用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>

三.效果

效果如下所示。
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/8253.html
标签
评论
发布的文章

JSON三种数据解析方法

2024-05-22 09:05:13

使用nvm管理(切换)node版本

2024-05-22 09:05:48

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!