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

最新推荐文章于 2023-09-25 16:04:17 发布

七彩猫猫虫

最新推荐文章于 2023-09-25 16:04:17 发布

阅读量599

点赞数

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

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

版权

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

摘要由CSDN通过智能技术生成

在这里插入图片描述

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