antd vue

antdvue table

• table上高亮的删选和排序重置

1. 利用computed，定义一个变量sortedInfo存储sorter，重置时清空

<template>
  <div >
    <a-card>
      <a-form layout="inline" style="margin-bottom:20px">
        <a-row :gutter="48">
            <a-button style="margin-left: 8px" @click="reset">重置</a-button>
        </a-row>
      </a-form>
      <a-table
        ref="table"
        :data-source="tableData"
        :pagination="false"
        :loading="loading"
        :columns="columns"
        :scroll="{x: 1300, y: height}"
        @change="onChange"
        :rowKey="(data, index) => index"
      >
        <div slot="name" slot-scope="text, record">
          <a-tooltip placement="topLeft" :title="record.name">
            <div class="name-style">{{ record.name | ten }}</div>
          </a-tooltip>
        </div>
        <!-- <div slot="name" slot-scope="text, record">
          <a-tooltip placement="topLeft" :title="record.name">
            <div class="name-style">{{ record.name | ten }}</div>
          </a-tooltip>
        </div> -->
        <div slot="address" slot-scope="text, record">
          <a-tooltip placement="topLeft" :title="record.address">
            <div class="name-style">{{ record.address | ten }}</div>
          </a-tooltip>
        </div>
        <div slot="action" slot-scope="text, record" fixed="right">
          <a @click="edit(record)" >编辑</a> |
          <a @click="del(record)" >删除</a>
        </div>

      </a-table>
    </a-card>
  </div>
</template>
<script>
import ImpPersonedit from './ImpPersonedit'
export default {
  data () {
    return {
      name: '',
      height: 380,
      tableData: [
        { name: 'zssdafasdf1', address: '11111', category: 'sadasf1' },
        { name: '进决赛的撒旦教觉得按实际却无法', address: '22222222333222222', time: '1993-02-01 07:11:18', status: '已审核' },
        { name: '结下账粉底', time: '1993-02-01 07:11:16' }
      ],
      sortedInfo: null,
      loading: false,
      sort1: [],
      sort2: []

    }
  },
  computed: {

     columns () {
      let { sortedInfo } = this
      sortedInfo = sortedInfo || {}
      const columns = [
        {
          title: '项目名称',
          dataIndex: 'name',
          key: 'name',
          width: '200px',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '项目类别',
          dataIndex: 'category',
          key: 'category',
          width: '150px',
          filters: [
            { text: '住宅多层', value: '1' },
            { text: '住宅高层', value: '2' },
            { text: '住宅超高层', value: '3' },
            { text: '别墅', value: '4' }
          ],
          scopedSlots: { customRender: 'category' }
        },
        {
          title: '项目地址',
          dataIndex: 'address',
          key: 'address',
          width: '200px',
          scopedSlots: { customRender: 'address' }
        },
        {
          title: '上报时间',
          dataIndex: 'time',
          key: 'time',
          width: '150px',
          sorter: true,
          sortOrder: sortedInfo.columnKey === 'time' && sortedInfo.order

        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          width: '120px',
          scopedSlots: { customRender: 'isEnd' },
          filters: [
            { text: '待审核', value: '1' },
            { text: '已通过', value: '2' },
            { text: '未通过', value: '3' }
          ]
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          scopedSlots: { customRender: 'action' },
          width: '100px',
          fixed: 'right'
        }
      ]
      return columns
     }
  },
  filters: {
    ten: function (value) {
      if (value && value.length > 10) {
        return String(value).substring(0, 10) + '...'
      } else {
        return value
      }
    }
  },
  mounted () {

  },
  methods: {
    init () {

    },
    reset () {
      console.log(this.$refs.table)
      this.name = ''
      this.onChange('reset')
      this.init()
    },
    // 监听点击事件 监听filters sorter
    onChange (pagination, filters, sorter) {
      this.sortedInfo = sorter
      console.log(sorter)
      if (pagination === 'reset') {
        this.sort1.length = 0
        this.sort2.length = 0
        this.sortedInfo = null
        this.$forceUpdate()
        return
      }
      if (filters.category) {
        this.sort1 = filters.category
      }
      if (filters.status) {
        this.sort2 = filters.status
      }

        this.init()
    },
     // table分页
    handleTableChange (page) {
      this.pagination.current = page
      this.init()
    },
    handleSizeChange (current, size) {
      this.pagination.current = current
      this.pagination.pageSize = size
      this.init()
    }
  }
}
</script>

2. 利用forceUpdate强制更新,同时修改排序的sortOrder对应的值

    // 监听点击事件 监听filters sorter
    onChange (pagination, filters, sorter) {
      if (pagination === 'reset') {
        this.sort1.length = 0
        this.sort2.length = 0

        this.$delete(this.sort3, 'order')
        this.$delete(this.sort3, 'column')
        this.$refs.table.columns[3].sortOrder = false

        this.$forceUpdate()

        return
      }
      if (filters.category) {
        this.sort1 = filters.category
      }
      if (filters.status) {
        this.sort2 = filters.status
      }
      this.$forceUpdate()
      this.sort3 = sorter

      console.log(sorter)
        this.orderStr = ''
        console.log(sorter.order)
        if (sorter.column && sorter.column.key === 'time') {
          if (sorter.order && sorter.order === 'ascend') {
              this.$refs.table.columns[3].sortOrder = 'ascend'
          } else if (sorter.order && sorter.order === 'descend') {
             this.$refs.table.columns[3].sortOrder = 'descend'
          } else {
             this.$refs.table.columns[3].sortOrder = false
          }
        }
        if (sorter.order === undefined) {
          this.$refs.table.columns[3].sortOrder = false
        }
        this.init()
    }