小颖前段时间做的项目里需要实现一个功能：表格可以行内编辑，并且表格的部分列是固定的，部分列随着右上角勾选的可显示列的变化而变化，在右侧我勾选了那些列，表格才能显示那些列，如果我没有勾选则不显示。
具体效果如图所示：小颖用的vue+Ant Design of Vue
html：<template> <div class="table-dynamic-column"> <p class="txt-right"> <a-dropdown :trigger="['click']"> <i class="fa fa-bars ant-dropdown-link"></i> <a-menu slot="overlay"> <a-menu-item key="1" :disabled="true" class="have-disabled"> <a-checkbox :indeterminate="indeterminate" @change="selectAllFun" :checked="checked">全选/反选 </a-checkbox> </a-menu-item> <a-menu-item key="2" :disabled="true" class="have-disabled"> <a-checkbox-group v-model="showColumn" @change="hideColumnChange()"> <div class="dropdown-menu-item-tem" v-for="(item,index) in movingColumns" @click="hideColumnFun(index)" :key="index"> <a-checkbox :value="item.dataIndex"> <span class="hide-column-tem">{{item.title}}</span> </a-checkbox> </div> </a-checkbox-group> </a-menu-item> </a-menu> </a-dropdown> </p> <a-table :columns="columns" :dataSource="data" bordered> <template v-for="col in editColumnDt" :slot="col" slot-scope="text, record" > <div :key="col"> <a-input v-if="record.editable" style="margin: -5px 0" :value="text" @change="e => handleChange(e.target.value, record.key, col)" /> <template v-else>{{text}}</template> </div> </template> <template slot="operation" slot-scope="text, record"> <div class="editable-row-operations" v-if="columns.length>3"> <span v-if="record.editable"> <a @click="() => save(record.key)">Save</a> <a-popconfirm title="Sure to cancel?" @confirm="() => cancel(record.key)"> <a>Cancel</a> </a-popconfirm> </span> <span v-else><a @click="() => edit(record.key)">Edit</a></span> </div> <div v-else>暂无操作</div> </template> </a-table> </div> </template>