element ui table改变sort箭头的三种方法100%管用

1、第一种方法，添加render渲染事件，但是浏览器好像不太喜欢

<el-table-column
    :render-header="(h, obj) => renderHeader(h, obj, item.type)"
 ></el-table-column>

// render 表头渲染 事件

 renderHeader(h, { column, $index }, index) {
        console.log(index)
        // h即为cerateElement的简写，具体可看vue官方文档
        return h('div', [
          h('span', column.label),
          h('el-checkbox', {
            style: 'margin-left:5px',
            on: {
              change: this.select, // 选中事件
            },
          }),
        ])
      },
 // 添加选中事件
      select(data) {
        console.log(data)
      },

  2、第二种方法 通过template 

     <el-table-column
        :prop="name"
        :label="ialias"       
      ><template slot="header">
          <div>
            <span>{{ item.alias }}</span>
          </div>
          <div>
            <i class="el-icon-caret-bottom"></i>
          </div>
        </template>
      </el-table-column>  

  3、第三种 使用css样式修改

   .el-table .sort-caret.ascending {
    border-bottom-color: transparent !important;
  }