1.表格表头重写

① 首先在column配置的时候,不要写title!!!
② 其次在column中,加入slots: { title: 'customTitle' },其中 customTitle可以为任意名称
③ 最后在代码中加入如下代码:

// slot的值与slots: { title: 'customTitle' }的title值保持一致
<template slot="customTitle">
  表头名称
  <a-icon type="smile-o" />  // 自定义
</template>

2.表格排序将 取消排序 删除

// column配置
sortDirections: ['descend', 'ascend', 'descend']**

3.表格清空所有的排序

// Dom
<a-table
  :columns="columns"
  @change="handleChangeSort"
/>

// Data
computed: {
  columns() {
    let { sortedInfo } = this;
    sortedInfo = sortedInfo || {};
    const columns = [
      {
        key: 'a',
        dataIndex: 'a',
        title: '行业相关性',
        sorter: true,
        sortDirections: ['descend', 'ascend'],
        sortOrder: sortedInfo.columnKey === 'a' && sortedInfo.order  // 主要加这个
      },
      {
        key: 'b',
        dataIndex: 'superStock',
        slots: { title: 'customTitle' },
        scopedSlots: { customRender: 'b' },
        sorter: true,
        sortDirections: ['descend', 'ascend'],
        sortOrder: sortedInfo.columnKey === 'b' && sortedInfo.order // 主要加这个
      }]
    return columns;
  },
},
data () {
  return {
    sortedInfo: null
  }
},
methods: {
	handleChangeSort (pagination, _, sorter) {
	  this.sortedInfo = sorter  // 主要是这句话
	}	
}

// 最后在点击清除的事件中,写入  this.sortedInfo = null
// 例如,tab切换的时候,change事件中写入 this.sortedInfo = null

4.表格动态渲染+操作自定义:

// DOM
<a-table
  :columns="columns"
  :data-source="tableData"
  :pagination="false"
  :scroll="{ x:0, y: 222 }"
>
  <template #name="{ text }">{{ text.first }} {{ text.last }}</template>
  <template #bodyCell="{ column,record }">
    <template v-if="column.key === 'opt'">
      <div style="display: flex;flex-wrap: nowrap;">
        <div class="text">按钮1</div>
        <div class="text">按钮2</div>
        <div class="text">按钮3</div>
        <div class="text">按钮4</div>
        <div class="text">按钮5</div>
      </div>
    </template>
  </template>
</a-table>
// Data
let tableData = [{
	name: '111'
},{
	name: '222'
}]
let columns =  [{
   title: '名称',
   dataIndex: 'name',
   key: 'name',
   ellipsis: true
 }, {
   title: '操作',
   dataIndex: 'opt',
   key: 'opt'
 }]

5.表格中自定义页码(版本 3.3.0):

<a-pagination
  class="pagination"
  show-size-changer
  v-model:current="pageCurrent"
  v-model:pageSize="pageSize"
  :total="count"
  @showSizeChange="onShowSizeChange"
  @change="handlePageChange"
>
<template #buildOptionText="props">
    <span>{{ props.value }}/</span>
  </template>
</a-pagination>
Logo

前往低代码交流专区

更多推荐