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

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

Home / Article MrLee 2019-8-30 10972

随着计算机，手机的普及，各种前端技术迭代也是疯狂更新。最近玩了玩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)
    }

是不是非常简单！

本文链接:http://it72.com/12566.htm

推荐阅读

BaiduCDP开源的百度网盘高速下载工具

鼠标滚动放大缩小导航栏代码

诺基亚全金属新机曝光

ubuntu下提取DSDT SSDT

插件实现WordPress博客静态文件CDN加速

最新回复 (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有区别？

站点信息

文章
2313
用户
1336
访客
11753858

每日一句

October ends with magic and candy.
十月以魔法和糖果收尾。