el-table只显示降序

el-table只显示降序进行排序

<template>
  <div class="content">
    <el-table
      :data="tableData"
      border
      @sort-change="sortChange"
      :default-sort="
        sortTitle != 'date'
          ? { prop: sortTitle, order: 'descending' }
          : { prop: 'date', order: 'descending' }
      "
      sort-orders="['ascending', 'descending', 'descending']"
      ref="table"
    >
      <el-table-column
        prop="date"
        label="日期"
        width="180"
        align="center"
        sortable="custom"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180"
        align="center"
        sortable="custom"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址"
        align="center"
        sortable="custom"
      >
      </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 弄",
        },
      ],
      sortTitle: "date", //默认是date为降序
    };
  },

  mounted() {},

  methods: {
    // 排序
    sortChange({ column, prop }) {
      if (this.sortTitle == prop) {
        column.order = "descending";
      } else {
        this.sortTitle = prop;
        this.$refs.table.columns.forEach((el) => {
          if (el.property != prop) {
            el.order = null;
          }
        });
        column.order = "descending";
      }
    },
  },
};
</script>

<style scoped>
.content .el-table {
  width: 600px;
  margin: 150px auto;
}
/* 只显示降序 */
.content .el-table /deep/ .sort-caret.ascending {
  display: none;
}
.content .el-table /deep/ .sort-caret.descending {
  bottom: 10px;
}
</style>