element table 给表头添加点击事件不触发排序

• 问题描述：在使用element表格排序的时候，在表头添加其他的点击事件时，老是会触发排序。

/** element table：
在有排序的情况下,在表头添加其他的点击事件，触发点击事件时，表格不进行排序 */
<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="日期" sortable width="180" ref="date">
        <template slot="header" slot-scope="scope">
          <i @click="iClick('date', true)" class="el-icon-edit"> </i>
          <span @click="iClick('date', false)"> {{ scope.column.label }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" sortable width="180">
      </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄"
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄"
        }
      ]
    };
  },
  methods: {
    /*
      排序的默认顺序是：原始数据、升序、降序，也就是[null ,ascending, descending]
      如果你现在的的排序是升序，点完之后就会变成降序，如果想让他的顺序保持不变，那就应该给order赋值为null
      因为通过实验发现，它是先执行我们定义的方法，在执行element自身的排序方法，这里的顺序就是关键点
      尚有的不足就是，没有办法做到只点击排序图标进行排序
    **/
    iClick(value, flag) {
      // flag是为了在点击文字时不触发点击事件，也不触发排序
      let refOrder = this.$refs[value].columnConfig.order;

      if (refOrder == "") {
        //最开始的时候refOrder是""
        this.$refs[value].columnConfig.order = "ascending";
      } else if (refOrder == "descending") {
        this.$refs[value].columnConfig.order = "ascending";
      } else if (refOrder == null) {
        this.$refs[value].columnConfig.order = "descending";
      } else if (refOrder == "ascending") {
        this.$refs[value].columnConfig.order = "null";
      }

      if (flag) {
        this.$message.info("无法编辑");
      }
    }
  }
};
</script>