vue使用elementui 的 table且自定义某列表头时,添加的点击事件和自带的筛选功能有类似冒泡行为

  • element 自带的table
    vue使用elementui 的 table且自定义某列表头时,添加的点击事件和自带的筛选功能有类似冒泡行为_第1张图片
  • 需求:在时间这一列的筛选按钮旁边添加一个批量修改按钮
  • 问题:如果不加排序这个属性,那么表格自带的筛选和新加的批量筛选点击事件会冲突(冒泡事件)
  • 解决方法:在该列添加sortable属性,然后在给table添加class,用css隐藏(目前我只相处了这一种不太合理的掩盖方式!,如果有知道其他好方法的可以告诉我下谢谢!)
<el-table
    ref="filterTable"
    :data="tableData"
    style="width: 100%"
	class="xxx"
	>
    <el-table-column
      prop="date"
      label="日期"
      sortable
      width="180"
      column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"
    >
    </el-table-column>
 </el-table>
 
 // css 使用stylus
.xxx
   >>>.caret-wrapper
        display none

你可能感兴趣的:(UI组件二改,vue.js,elementui,前端)