Ant Design Vue 表格自定义单元格

环境：

<template>
    <page-view>
        <a-card>
            <div class="search-box">
                <a-input v-model="table.query.ruleName" placeholder="输入关键词" />
                <a-button type="primary" @click="onSearch"><a-icon type="search" />查询</a-button>
                <a-button @click="reset"><a-icon type="undo" />重置</a-button>
            </div>
            <div class="table-wrapper">
                <div>
                    <a-table
                        ref="table"
                        :columns="table.columns"
                        :dataSource="table.dataList"
                        :pagination="table.pagination"
                        @change="handleChangePage"
                    >
                        <span slot="ruleName" slot-scope="text, record">
                          <template>
                              <span>{{ record.ruleName }}</span>
                          </template>
                        </span>
                        <span slot="ruleDescription" slot-scope="text, record">
                          <template>
                                <span>{{ record.ruleDescription }}</span>
                          </template>
                        </span>
                        <span slot="score" slot-scope="text, record">
                          <template>
                              <span v-if="!record.isUse">{{ record.score }}</span>
                              <a-input-number v-if="record.isUse" v-model="record.score" :min="1"/>
                          </template>
                        </span>
                        <span slot="dayMaxScore" slot-scope="text, record">
                          <template>
                              <span v-if="!record.isUse">{{ record.dayMaxScore }}</span>
                              <a-input-number v-if="record.isUse" v-model="record.dayMaxScore" :min="record.score"/>
                          </template>
                        </span>
                        <span slot="state" slot-scope="text, record, index">
                          <template>
                            <div v-if="!record.isUse">
                               <span v-if="record.state == 0">禁用</span>
                               <span v-if="record.state == 1">启用</span>
                            </div>
                            <a-dropdown v-if="record.isUse">
                              <a class="ant-dropdown-link">
                                  <span v-if="record.state == 0">禁用</span>
                                  <span v-if="record.state == 1">启用</span>
                                <a-icon type="down" />
                              </a>
                              <a-menu slot="overlay">
                                <a-menu-item v-if="record.state == 1">
                                  <a href="javascript:;" @click="handleChangeStatus(record, index, 0)">禁用</a>
                                </a-menu-item>
                                <a-menu-item v-if="record.state == 0">
                                  <a href="javascript:;" @click="handleChangeStatus(record, index, 1)">启用</a>
                                </a-menu-item>
                              </a-menu>
                            </a-dropdown>
                          </template>
                        </span>
                        <span slot="action" slot-scope="text, record, index">
                          <template>
                            <a-button v-if="record.isUse" style="border-color: #1890ff;color: #1890ff;" @click="handleSaveCol(record, index)">保存</a-button>
                            <a-button v-if="!record.isUse" style="border-color: forestgreen;color: forestgreen;margin: 0 4px" @click="handleChangeCol(record, index)">修改</a-button>
                          </template>
                        </span>
                    </a-table>
                </div>
            </div>
        </a-card>
    </page-view>
</template>

<script>
    import {listPage, saveOrUpdate} from '@/api/point/point'
    import {columns} from './constant'
    export default {
        name: 'PointSetting',
        data() {
            return {
                table: {//表格数据
                    columns: columns,
                    query: {},
                    dataList: [
                        // { ruleName: 2,ruleDescription:333,score:444, state: 1,dayMaxScore:222 }
                    ],
                    pagination: {
                        current: 1,
                        pageSize: 10,
                        total: 0
                    },
                },
            }
          },
        created() {
            this.listPage();//加载列表
        },
        methods: {
            listPage(pagination, filters, sorters) {
                const params = Object.assign({
                    ruleName: this.table.query.ruleName
                }, pagination, filters, sorters);
                return listPage(params)
                    .then(response => {
                        this.table.dataList = response.data;
                    })
            },
            onSearch() {
                this.listPage();//刷新列表
            },
            reset() {
                this.table.query = {};//清空查询条件
                this.listPage();//重置列表
            },
            handleChangePage(page) {
                this.table.pagination.current = page.current
            },
            handleChangeStatus(data, index, type) {
                this.table.dataList.splice(index, 1, {
                    ...data,
                    state: type
                })
            },
            // 保存按钮
            handleSaveCol(data, index) {
                this.table.dataList.splice(index, 1, {
                    ...data,
                    isUse: false
                })
                console.log(data)
                this.saveOrUpdate(data);
            },
            // 修改按钮
            handleChangeCol(data, index) {
                this.table.dataList.splice(index, 1, {
                    ...data,
                    isUse: true
                })
            },
            //保存方法
            saveOrUpdate(data) {
                return saveOrUpdate(data.id, data).then(
                    response => {
                        return response;
                    }
                );
            },
          }
    };
</script>

<style scoped>
    .search-box {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }
    .search-box>button {
        margin-left: 15px;
    }
    .search-box>input {
        width: 200px;
    }
    .ant-dropdown-link>span {
        margin-right: 5px;
    }
</style>

问题：

如何在表格中自定义输入框、下拉框？

解决：

constant.js中代码

import { initTimeDate } from '@/utils/utils'
export const columns = [
  {
    title: '序号',
    width: '80px',
    align: 'center',
    customRender: (text, record, index) => {
      return index + 1;
    },
  },
  {
    title: '积分规则',
    width: '200px',
    align: 'center',
    dataIndex: 'ruleName',
    scopedSlots: { customRender: 'ruleName' },
  },
  {
    title: '规则说明',
    align: 'center',
    dataIndex: 'ruleDescription',
    scopedSlots: { customRender: 'ruleDescription' },

  },
  {
    title: '分值',
    align: 'center',
    width: '200px',
    dataIndex: 'score',
    scopedSlots: { customRender: 'score' },
  },
  {
    title: '每日分值上限',
    dataIndex: 'dayMaxScore',
    align: 'center',
    width: '200px',
    scopedSlots: { customRender: 'dayMaxScore' },
  },
  {
    title: '状态',
    dataIndex: 'state',
    align: 'center',
    width: '150px',
    scopedSlots: { customRender: 'state' },
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '200px',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
];

export const columnsTwo = [
  {
    title: '序号',
    width: '80px',
    align: 'center',
    customRender: (text, record, index) => {
      return index + 1;
    },
  },
  {
    title: '部门机构',
    align: 'center',
    dataIndex: 'diskName',
  },
  {
    title: '用户姓名',
    width: '150px',
    align: 'center',
    dataIndex: 'diskSize',
    scopedSlots: { customRender: 'diskSize' },

  },
  {
    title: '积分',
    align: 'center',
    width: '200px',
    dataIndex: 'createTime',
  },
];