如何用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>
三.效果
效果如下所示。