日常总结记录: element-table+el-popover

今天在思否看有人问每行加popover，就手动写了个；单个table行加弹出框就不写了，很简单； 话不多说，直接贴代码；

常规显示

<el-table :data="tableData" style="width: 100%">
  <template v-for="(item,index) in columns">
    <el-table-column :key="index" :prop="item.prop" :label="item.label">
      <template slot-scope="scope">
        <el-popover
          trigger="click"
          visible-arrow="false"
          content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
        >
          <div slot="reference">
            <p class="text">{{scope.row[item.prop]}}</p>
          </div>
        </el-popover>
      </template>
    </el-table-column>
  </template>
</el-table>

如果显示内容是请求接口

  <template slot-scope="scope">
      <el-popover
        trigger="click"
        visible-arrow="false"
        @show="popoverDetail(scope.row.id)"
      >
        <div slot="reference">
          <p class="text">{{scope.row[item.prop]}}</p>
        </div>
        <div>
			// 根据需求显示请求的数据 自定义
		<div>
      </el-popover>
    </template>
    

抽出来 columns；

 columns：[{      prop:"XX",      label:"xx"  }]

打完收工；也可根据需求动态显示table导航栏；

有不对的地方欢迎指正，谢谢；

有帮到您的地方麻烦点个赞谢谢；

祝您早日脱单；发量日益增多；