您可以在 <el-table-column> 组件的 slot-scope 属性中自定义单元格的内容,并在其中添加一个小图标。当小图标被点击时,可以使用弹窗组件 (<el-dialog>) 来显示表单。

以下是一个示例代码:

<el-table-column label="售后原因" prop="refundCause" width="180">
  <template slot-scope="{row}">
    <div>
      <!-- 小图标 -->
      <i class="el-icon-edit" @click="showForm(row)"></i>
      {{ row.refundCause }}
    </div>
  </template>
</el-table-column>

在上述示例中,我们使用了 <i> 元素和 el-icon-edit 类来表示小图标。当小图标被点击时,会调用 showForm 方法,并传递当前行数据 row 作为参数。

在 Vue 实例中,您可以定义 showForm 方法来处理点击事件,例如:

methods: {
  showForm(row) {
    // 打开弹窗显示表单
    this.$refs.dialogForm.visible = true;
    // 设置当前行数据
    this.currentRow = row;
  }
}

这里我们使用了 $refs 来访问弹窗组件的实例,并设置 visible 属性为 true,以显示弹窗。同时,我们也将当前行数据保存在 currentRow 变量中,以便在弹窗中使用。

您还需要在 Vue 实例中定义弹窗的相关代码,如下所示:

<el-dialog title="表单" :visible.sync="visible" ref="dialogForm">
  <!-- 表单内容 -->
  <!-- 可根据需要添加表单元素 -->
  <el-form :model="currentRow" label-width="80px">
    <el-form-item label="售后原因">
      <el-input v-model="currentRow.refundCause"></el-input>
    </el-form-item>
    <!-- 其他表单项 -->
  </el-form>
  
  <!-- 弹窗中的按钮 -->
  <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取消</el-button>
    <el-button type="primary" @click="saveForm">保存</el-button>
  </span>
</el-dialog>

在上述代码中,我们使用了 <el-dialog> 组件来创建弹窗,并通过 :visible.sync 属性实现双向绑定。这样,当点击取消按钮时,可以将弹窗关闭。表单内容可以根据需求进行修改。

同时,我们还定义了 saveForm 方法来处理保存按钮的点击事件,您可以根据需要在该方法中编写保存表单的逻辑。

请注意,弹窗的 visible 属性和当前行数据 currentRow 需要在 Vue 实例的 data 属性中进行初始化,例如:

data() {
  return {
    visible: false, // 弹窗是否可见
    currentRow: null // 当前行数据
  };
}

希望以上示例能够帮助您实现在单元格内添加小图标,并在点击小图标时弹出表单的功能

el-table-column label=售后原因 prop=refundCause width=180 单元格内需要增加一个小图标点击小图标后弹出表单

原文地址: https://www.cveoy.top/t/topic/iNjG 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录