如何利用动态表格在 vue+elementUI 中实现下拉框式表格？-js教程-PHP中文网

如何利用动态表格在 vue+elementUI 中实现下拉框式表格？

心靈之曲

发布： 2024-10-27 11:24:12

原创

1021人浏览过

如何利用动态表格在 vue+elementui 中实现下拉框式表格？

利用动态表格实现 vue+elementui 下拉框式表格

在 vue+elementui 中，由于表格组件不支持表格第一行全为下拉框的功能，因此需要通过特殊处理来实现。

具体实现如下：

将表格的第一条数据单独处理：

立即学习“前端免费学习笔记（深入）”；

飞书多维表格
表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情
- 移除第一条数据的表格行，并将其放入一个单独的表单中。
- 创建一个下拉框，将选项数据绑定到下拉框的 options 属性。
- 在下拉框选中后，执行保存操作，将新记录添加到表格数据中。
在表格中添加新记录：
- 使用 add() 方法向表格数据中添加新记录。
- 将从下拉框中获取的值设置为新记录的属性。

示例代码：

<template>
  <div>
    <el-form :model="form">
      <el-row>
        <el-col :span="2">
          <el-select v-model="form.type" @change="handleSave">
            <el-option
              v-for="option in options"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </el-col>
      </el-row>
    </el-form>
    <el-table :data="tableData" stripe>
      <el-table-column property="type" label="类型" />
      <el-table-column property="value" label="值" />
    </el-table>
  </div>
</template>

<script>
import { ElForm, ElRow, ElCol, ElSelect, ElOption, ElTable, ElTableColumn } from 'element-ui'

export default {
  components: { ElForm, ElRow, ElCol, ElSelect, ElOption, ElTable, ElTableColumn },
  data() {
    return {
      options: [
        { value: 'A', label: '选项 A' },
        { value: 'B', label: '选项 B' },
        { value: 'C', label: '选项 C' },
      ],
      tableData: [],
      form: {
        type: '',
        value: '',
      },
    }
  },
  methods: {
    handleSave() {
      this.tableData.push({ type: this.form.type, value: this.form.value })
      this.form.type = ''
      this.form.value = ''
    },
  },
}
</script>

登录后复制

通过这种方式，可以实现 vue+elementui 中动态下拉框表格的效果。

以上就是如何利用动态表格在 vue+elementUI 中实现下拉框式表格？的详细内容，更多请关注php中文网其它相关文章！