ksc-fe / kpc

A UI Components Library for Intact, Vue, React and Angular.
https://design.ksyun.com/
MIT License
362 stars 53 forks source link

Table添加表格列的配置描述columns属性 #986

Open qinfeng0214 opened 6 months ago

qinfeng0214 commented 6 months ago

Is your feature request related to a problem? Please describe. A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 当我编写vue组件的时候,每遇到一个table组件,都需要通过TableColumn一个一个去编辑,当table有很多列的时候,后期维护也不是一件容易的事情。希望可以提供一个表格列的配置描述api Describe the solution you'd like A clear and concise description of what you want to happen. 这是我想要的实现方式:

<template>
  <Table :data="dataList" :columns="columns" />
</template>
<script setup>

import {ref} from 'vue '
import { Table } from '@king-design/vue'

const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      }
]

const dataList = ref([
    {
    name:"tom",
    age:18
    },
    {
    name:"Jack",
    age:28
    }
])

</script>

Describe alternatives you've considered A clear and concise description of any alternative solutions or features you've considered.

Additional context Add any other context or screenshots about the feature request here.

qinfeng0214 commented 5 months ago

考虑到会有自定义的需求,希望能开放这样的api

<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 === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>
   </template>

这样就能彻底通过columns这个api管理列名 @Javey