a-table里添加不了点击事件

Posted 2023-04-09

a-table里添加不了点击事件
问题：bootstrap table 生成的表格里formatter添加 的 html元素 按钮，js 中添加 点击事件，点击没反应。或者点击好多次，刷新在点击，才有反应。
最近项目用到这个插件，马上就来坑了。自定义的button 点半天没反应，
猜测：
是这个表格插件 加载 数据的时候 跟 js 中 append 添加 html代码 是一样的。
js append方法添加的 html代码，然后给这代码里面的 元素 添加 事件，却获取不该元素。（称之为未来元素），由于是未来的 所以 现在 没有这个元素，导致获取不到。
解决方法：
1.遇到加载 获取不到元素 的 id 或者 class 的时候，可以考虑用这种 新版的 on 方法 添加 这种未来 元素 event 事件。类似其他事件方式写法相同。

2.给该元素 绑定一个 点击事件。 参考技术A 【前端】vue2.x配合bootstrapTable动态添加元素和绑定点击事

件，事件⽆效解决

背景：

　　使⽤bootstrap-table 表格插件时，每⼀⾏的最后⼀班会加操作按钮列。如果不加⼊vue的话，使⽤插件⾃⼰的列属性

formatter:function(value, row, index)即可解决，动态拼接的html元素和对应的点击事件都可以正常使⽤。问题来了，在使⽤vue时，点击事件不起作⽤了，F12后发现@click=""被解析成字符串了.这不就很扯淡了。

分析：

　　使⽤vue时，点击事件在vue初始化的时候进⾏编译的，但bootstrap-table中⾏操作事件和dom并没有加载进去。所以@click等事件⾃然⽽然的被当成字符串来玩了。

解决：　　

⽅案⼀：

　　上⾯说了，vue编译时还没加载，那咱能不能再bootstrap-table加载onLoadSucces的时候在进⾏编译什么的？我是将Vue根实例放在bootstrap-table 加载成功的函数⾥⾯了(可能不对！)，最后没有成功

⽅案⼆：

　　表格操作dom和事件被识别成字符串了,Vue没有编译。咱能不能先让Vue把dom编译好了，咱再把dom插⼊到对应的节点上去。所以就引出 Vue的组件知识了。具体知识点还是各位⾃⾏查询琢磨。我这⾥给出解决结果。

代码：

不使⽤vue时bootstrap-table对操作列加载⽅式如下



title: '操作',

valign:'middle',

width:'300px',

formatter:function(value, row, index)

var ans ="";

ans+="<a href=\"javascript:\" class=\"btn btn-primary btn-xs\" role=\"button\"><i class=\"fa fa-pencil-square-o\"></i>编辑</a> ";

ans+="<a href=\"javascript:\" class=\"btn btn-success btn-xs\" role=\"button\"><i class=\"fa fa-eye\"></i>查看</a> ";

ans=ans+"<a href=\"ja 参考技术B bootstraptable中onExpandRow属性---js 方法添加的 html代码，然后给这代码里面的 元素 添加 事件，却获取不该元素。（称之为未来元素），由于是未来的 所以现在没有这个元素，导致获取不到。

//代码不会触发点击事件；
//$("#btn_export_curr_page_detail").click(function ()
// var attribute = $('#btn_export_curr_page_detail').attr('data-attribute6');
// AjaxRequest_CreateExcelFromCurrPageDetail(attribute);
//);
onExpandRow: function (index, row, $detail)
var cur_table = $detail.html('<table id="report-query-detaillist-table"></table>').find('table');
var html = "";
html += '<div id="detailToolbar" class="btn-group">';
html += ' <button id="btn_export_curr_page_detail" data-attribute6 = "' + row.ATTRIBUTE6 + '" type="button" class="btn btn-default export-curr-page-detail">';
html += ' <span class="glyphicon glyphicon-export" aria-hidden="true"></span>@Html.LocText("ExportCurrentPage", "导出本页到Excel")';

ant-design-vue a-table的分页

 <a-table
        :columns="columns"       //列
        :dataSource="tableDatas"  //数据
        :loading="loading"
        :pagination="pagination"  //分页属性
        @change="handleTableChange"//点击分页中数字时触发的方法
        :rowKey="tableDatas => tableDatas.id"    //每一行的标识
      >
        <span slot="action" slot-scope="text, record">  //放表格中操作的按钮
          <div class="tabBtn" >
            <a-popover placement="bottomRight" overlayClassName="tableBtn">
              <template slot="title">
                <a href="javascript:;" @click="handleAdd(record)" >
                  <i class="iconfont icon-table-edit" />编辑
                </a>
                <a href="javascript:;" @click="deleHostData(record)">
                  <i class="iconfont icon-tableEmpty" />删除
                </a>
              </template>
              <span>
                <i class="iconfont icon-tableMore" />
              </span>
            </a-popover>
          </div>
        </span>
      </a-table>

//data中的数据
data() {
    return {
      pagination: {
        total: 0,
        pageSize: 10,//每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
        showTotal: total => `共有 ${total} 条数据`,  //分页中显示总的数据
      },


      loading: true,
      // 查询参数
      queryParam: {
        page: 1,//第几页
        size: 10,//每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: ""
      },
    };

    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;
      this.getTableList();
    },
//调用查询接口为dataSource 赋值

    getTableList() {

      this.loading = true;

      retriveHosData(this.queryParam).then(res => {

        if (res.message === "SUCCESS") {

          const pagination = { ...this.pagination };

          pagination.total = res.data.total;

          this.tableDatas = res.data.list;

          this.pagination = pagination;

        }

        this.loading = false;

      });

    },

原文链接： cnblogs.com/lvlvlv/p/11543575.html