element的表格组件表格表头添加问号图标提示且表格的内容可编辑

初心w50t2

于 2024-03-07 17:55:48 发布

阅读量760

点赞数 3

分类专栏： VUE 文章标签： vue.js 前端 elementui

本文链接：https://blog.csdn.net/qq_41910413/article/details/136540984

版权

VUE 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue应用中使用ElementUI的el-table组件展示数据，包括列定义、模板插槽以及如何结合el-form-item和自定义bs-popover实现整改周期的输入框并附带气泡提示功能。

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

代码如下：

  <el-table
        ref="table"
        border
        stripe
        :data="rows"
        :height="height"
        highlight-current-row
      >
        <el-table-column
          type="index"
          :width="uiSetting.table.index"
          label="序号"
          align="center"
        />
        <el-table-column
          prop="name"
          label="整改周期"
          width="200"
          align="center"
          show-overflow-tooltip
        >
          <template slot="header">
            整改周期
            // 这里bs-popover是我们基于el-popover封装的气泡窗，此处也可以使用<i>图标加el-popover实现
            <bs-popover
              content="气泡提示内容"
            ></bs-popover>
          </template>
          <template slot-scope="scope">
            <el-form-item>
              <el-input v-model="scope.row.name" />
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>