el-table按钮点击生成input输入行，且能根据接口数据进行联动选择

七彩猫猫虫

于 2021-10-29 15:13:29 发布

阅读量662

点赞数

CC 4.0 BY-SA版权

分类专栏：工作中的小问题文章标签： javascript 前端 es6

本文链接：https://blog.csdn.net/SDAW_1/article/details/121035325

这篇博客详细介绍了如何使用Vue.js框架来创建一个具有动态表格功能的审批流程管理界面。内容包括设置表格列如审批环节名称、审批部门和指定审批人的方法，以及如何通过el-select组件实现选择审批部门和审批人的交互。此外，还展示了添加审批流环节的逻辑和删除操作。文章重点讨论了数据绑定、事件监听和组件通信在实现这一功能中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<el-table
          :data="form.node_data"
          border
          style="width: 100%"
          :header-cell-style="{background:'#F7F7F7'}"
        >
          <el-table-column
            fixed
            prop="name"
            label="审批环节名称"
            align="center"
          >
            <template slot-scope="scope">
              <span>{
   
   {
   
    scope.row.name+(scope.$index+1) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="department_id"
            label="审批部门"
            align="center"
          >
            <template slot-scope="scope">
              <el-select
                v-model="form.node_data[scope.$index].department_id"
                placehol