在 Element UI 的 el-table 组件中,可以使用 scoped-slot 来自定义表格列的渲染方式。通过在 el-table-column 组件中定义 scopedSlots 属性,可以在表格中渲染自定义的组件或 HTML 代码。下面是一个示例:pgsqlCopy

<template>
  <el-table :data="tableData" @row-dblclick="handleRowDblclick">
    <el-table-column prop="name" label="姓名"></el-table-column>
    <el-table-column prop="age" label="年龄"></el-table-column>
    <el-table-column label="操作">
      <template #default="{row}">
        <el-button type="danger" @click="deleteRow(row)">删除</el-button>
      </template>
    </el-table-column>
    <el-table-column label="地址" :editable="true">
      <template #default="{row, column}">
        <el-input v-model="row.address" v-if="column.editable"></el-input>
        <span v-else>{{ row.address }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 20, address: '北京市' },
        { name: '李四', age: 25, address: '上海市' },
        { name: '王五', age: 30, address: '广州市' }
      ]
    }
  },
  methods: {
    handleRowDblclick(row) {
      row.editable = true
    },
    deleteRow(row) {
      const index = this.tableData.indexOf(row)
      if (index !== -1) {
        this.tableData.splice(index, 1)
      }
    }
  }
}
</script>

在上面的示例中,我们使用了 el-table 组件渲染表格数据,并使用了 el-table-column 组件渲染表格列。在表格中,我们使用了 scoped-slot 来自定义地址列的渲染方式,使用了 v-if 和 v-else 指令来根据 editable 属性的值切换组件的显示。在 handleRowDblclick 方法中,我们将双击的行的 editable 属性设置为 true,以便在双击后将输入框显示出来。在 deleteRow 方法中,我们使用 indexOf 方法找到要删除的行的索引,并使用 splice 方法从表格数据中删除该行。

需要注意的是,在双击表格行时,需要将 editable 属性添加到表格数据中,并将其初始值设置为 false。此外,在自定义渲染组件时,需要通过 column.editable 判断当前列是否允许编辑。最后,在表格中添加 @row-dblclick 事件监听器来响应双击事件。

By lxcss

发表评论

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