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

MrLee24天前 183


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

推荐阅读
最新回复 (2)
  • 18天前
    不错
  •     <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有区别?

返回