el-table中表头加了文字提示_el-table-column 添加说明-CSDN博客

本文介绍如何使用Vue框架实现表格数据的排序功能，并展示如何创建自定义表头和提示文字。通过示例代码，读者可以了解具体实现细节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.模板字符串的代码

 <template>
   <!-- 
     1.@sort-change点击排序触发的函数 
     2.:default-sort需要排序的字段
  -->
  <el-table @sort-change="sort"  :default-sort = "{prop: 'date'}" :data="tableData" style="width: 100%; margin-top: 100px">
    <!-- 单元格是自定义表头 + 自定义内容 -->
    <el-table-column prop="date" label="日期" sortable>
        <template slot-scope="scope" slot="header" sortable>
        <el-tooltip
          :aa="scope"
          class="item"
          effect="dark"
          :content="content()"
          placement="top"
        >
          <span>表头标题</span>
        </el-tooltip>
      </template>
      <template slot-scope="scope">
        {{scope.row.name}}
      </template>
    </el-table-column>
  </el-table>
</template>

2.js代码

<script>
export default {
  data() {
    return {
      order:null,
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },

      ],
    };
  },
  methods: {
    // 点击表头排序触发的状态
    sort(column ){
      this.order = column.order
    },
    // 这里时表头提示的文字
    content(){
      if(this.order === null){
        return '点击升序'
      }else if(this.order === 'ascending'){
        return '点击降序'
      }else if(this.order === "descending"){
        return '取消排序'
      }
    }
  },
};
</script>

3.效果图