在 Element UI 的 el-table 组件中,可以使用 el-input 组件在单元格中添加输入框。下面是一个示例:pgsqlCopy

<template>
  <el-table :data="tableData">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄">
      <template slot-scope="{ row }">
        <el-input v-model="row.age"></el-input>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20 },
        { name: '李四', age: 25 },
        { name: '王五', age: 30 }
      ]
    }
  }
}
</script>

在上面的示例中,我们在 el-table-column 中使用了一个插槽,将 el-input 组件插入到单元格中。使用 slot-scope 属性可以访问到当前行的数据,从而将输入框绑定到对应的数据上。

需要注意的是,由于 el-input 组件是一个受控组件,因此必须在 data 选项中为每一行数据定义一个初始值。在示例中,我们将每一行的 age 属性设置为一个初始值。

此外,还可以为 el-input 组件添加其他属性,例如 sizeplaceholder 等。

需要注意的是,在单元格中添加输入框可能会影响表格的交互体验,因此应该根据实际需求进行选择。

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注