TableColumnSetting 列设置

代码演示

基础用法

<script setup>
import { DownOutlined, SettingOutlined, SmileOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'
import { TableColumnSetting as XTableColumnSetting, Toolbar as XToolbar } from '@/components'

const columns = ref([
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
  },
  {
    title: 'Action',
    key: 'action',
  },
])

const data = ref([
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
])
</script>

<template>
  <x-toolbar>
    <x-table-column-setting v-model:columns="columns">
      <a-tooltip title="列设置">
        <a-button type="text">
          <template #icon>
            <setting-outlined />
          </template>
        </a-button>
      </a-tooltip>
    </x-table-column-setting>
  </x-toolbar>
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="false"
    class="mt-8-2"
  >
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'title'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag
            v-for="tag in record.tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <x-action-button>Edit</x-action-button>
        <x-action-button>Delete</x-action-button>
        <a-dropdown>
          <x-action-button>
            More
            <down-outlined class="fs-10" />
          </x-action-button>
          <template #overlay>
            <a-menu>
              <a-menu-item> 1st menu item</a-menu-item>
              <a-menu-item> 2nd menu item</a-menu-item>
              <a-menu-item> 3rd menu item</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </template>
  </a-table>
</template>

<style lang="less" scoped></style>

自定义

<script setup>
import { DownOutlined, SettingOutlined, SmileOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'
import { TableColumnSetting as XTableColumnSetting, Toolbar as XToolbar } from '@/components'

const columns = ref([
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
    hidden: true,
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
  },
  {
    title: 'Action',
    key: 'action',
    ignoreSetting: true,
  },
])

const data = ref([
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
])
</script>

<template>
  <x-toolbar>
    <x-table-column-setting v-model:columns="columns">
      <a-tooltip title="列设置">
        <a-button type="text">
          <template #icon>
            <setting-outlined />
          </template>
        </a-button>
      </a-tooltip>
    </x-table-column-setting>
  </x-toolbar>
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="false"
    class="mt-8-2"
  >
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          Name
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'title'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag
            v-for="tag in record.tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <x-action-button>Edit</x-action-button>
        <x-action-button>Delete</x-action-button>
        <a-dropdown>
          <x-action-button>
            More
            <down-outlined class="fs-10" />
          </x-action-button>
          <template #overlay>
            <a-menu>
              <a-menu-item> 1st menu item</a-menu-item>
              <a-menu-item> 2nd menu item</a-menu-item>
              <a-menu-item> 3rd menu item</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </template>
  </a-table>
</template>

<style lang="less" scoped></style>

动态列

<script setup>
import { DownOutlined, SettingOutlined, SmileOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'
import { TableColumnSetting as XTableColumnSetting, Toolbar as XToolbar } from '@/components'

const columns = ref([
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
  },
  {
    title: 'Action',
    key: 'action',
  },
])
const data = ref([
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
])
const tableColumnSettingRef = ref()

function handleDynamic() {
  columns.value = [
    {
      title: 'Title',
      dataIndex: 'name',
      key: 'name',
    },
    {
      title: 'Age',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: 'Action',
      key: 'action',
    },
  ]

  tableColumnSettingRef.value.init(columns.value)
}
</script>

<template>
  <x-toolbar>
    <a-space>
      <x-table-column-setting
        ref="tableColumnSettingRef"
        v-model:columns="columns"
      >
        <a-tooltip title="列设置">
          <a-button type="text">
            <template #icon>
              <setting-outlined />
            </template>
          </a-button>
        </a-tooltip>
      </x-table-column-setting>

      <a-button @click="handleDynamic">
        动态设置列
      </a-button>
    </a-space>
  </x-toolbar>
  <a-table
    :columns="columns"
    :data-source="data"
    :pagination="false"
    class="mt-8-2"
  >
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          {{ column.title }}
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'title'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag
            v-for="tag in record.tags"
            :key="tag"
            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <x-action-button>Edit</x-action-button>
        <x-action-button>Delete</x-action-button>
        <a-dropdown>
          <x-action-button>
            More
            <down-outlined class="fs-10" />
          </x-action-button>
          <template #overlay>
            <a-menu>
              <a-menu-item> 1st menu item</a-menu-item>
              <a-menu-item> 2nd menu item</a-menu-item>
              <a-menu-item> 3rd menu item</a-menu-item>
            </a-menu>
          </template>
        </a-dropdown>
      </template>
    </template>
  </a-table>
</template>

<style lang="less" scoped></style>

API

Props

参数	说明	类型	默认值
columns（v-model）	列	array	[]

Events

事件名	说明	回调参数
change	列发生改变	columns: array

Methods

通过 ref 可以获取到 TableColumnSetting 实例并调用实例方法。

方法名	说明	参数	返回值
init	初始化，动态改变表格列时调用	column: array 新的表格列	-