解决vue动态生成el-table-column按钮点击事件

Home / Article MrLee 2019-8-30 9297


随着计算机，手机的普及，各种前端技术迭代也是疯狂更新。最近玩了玩vue框架，发现前端开发已经相当简单、快捷、高效并且效果还美观。今天记录一下遇到的一个问题。在动态生成el-table-column的时候，其它列值无法显示，

    <el-table :data="tableData"
              @cell-click="cellClick">
      <el-table-column v-for="(col,index) in colums_title"
                       :key="col.index"
                       :prop="col.prop"
                       :label="col.label"
                       :width="calcWidth(index)">
        <template v-if="index===0">
          <!-- 添加slot其它列值不能正常显示 -->
          <el-button size="small"><i class="el-icon-printer"></i></el-button>
        </template>
      </el-table-column>
    </el-table>

反正没多研究，感觉好像是把默认的template替换了，系统找不到要显示的控件所以不能显示了。这里采取@cell-click="cellClick"方法，列值点击更灵活。比如我只想第一列响应，其它列不响应。

    cellClick (row, column, cell, event) {
      if (cell.cellIndex !== 0) return
      this.$message(row.name)
    }

是不是非常简单！

本文链接:https://www.it72.com/12566.htm

收藏的用户（0） X
正在加载信息~
推荐阅读
谷歌酝酿Swift作为安卓APP开发语言
每天5点起床跑步、坚持30多年......那些自律到极致的人，后来都怎么样了？
angularjs页面不刷新的解决办法
CentOS服务器从Apache换到Nginx
easypoi快捷表格框架使用
【源码】Pixel Dungeon
Autonomous NAT Traversal
OllyDbg常用断点收藏（一）
不是限韩令的错，而是我们真的应该好好反省自己了
发几个实用的chrome插件
最新回复 (2)
  • 明 2019-9-6
    引用 2楼
    不错
  • 问 2019-9-11
    引用 3楼 
        <elx-table 
               ref="multipleTable"
               :data="tableData"
               :custom-columns.sync="customColumns"
               tooltip-effect="dark"
               style="width: 100%"
               height="500"
               show-summary
               @selection-change="handleSelectionChange">
              <elx-table-column type="selection"></elx-table-column>
              <elx-table-column v-for="(col,index) in asset_title_data"
                        :key="col.index"
                        :prop="col.prop"
                        :label="col.label">
                <template slot-scope="scope" v-if="index===asset_title_data.length-1">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
              </elx-table-column>
    </elx-table>

    这种写法也不知道为什么又可以了……

    难道是因为elx-table和el-table有区别？

返回
站点信息
  • 文章
    2281
  • 用户
    1336
  • 访客
    9540060
每日一句
Never judge a book by its cover.
不要以貌取人。
新会员