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

一 单元格中包含文字+input

<template>
  <div>
    <div class="title">销售行为-- 标签设置</div>
    <el-table :data="userList" border :header-cell-style="{ background: '#f5f5f5' }">
      <el-table-column prop="caozuo" label="销售行为" width="180" />
      <el-table-column prop="userName" label="时间限定" width="400px">
        <template #default="scope">
          超过
          <el-input v-model="scope.row.userName" style="width: 60px; margin: 0px 15px" clearable />
          {{ scope.row.desc }}
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue"
//原数据集
const userList = ref([
  {
    caozuo: "首次跟进",
    userName: 123,
    desc: "小时未跟进"
  },
  {
    caozuo: "成交",
    userName: 456,
    desc: "天未成交"
  }
])
</script>

<style scoped>
.title {
  border-left: 3px solid red;
  margin-bottom: 20px;
  padding-left: 20px;
}
</style>

配置表头颜色

:header-cell-style="{ background: '#f5f5f5' }"

二 只有input

<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>

如何用VUE在table表格中使用input输入框_table里放input-CSDN博客

VUE element-ui之table表格中嵌套输入框，且输入框失焦自动勾选当前行_vue element-ui之table表格中嵌套输入框,且输入框失焦不要自动勾选当前行-CSDN博客