标签：name title pro element ant key address 2016 age

iview
<Table :columns="columns1" :data="data1"></Table> columns1: [                     {                         title: 'Name',                         key: 'name'                     },                     {                         title: 'Age',                         key: 'age'                     },                     {                         title: 'Address',                         key: 'address'                     }                 ], data1: [     {         name: 'John Brown',         age: 18,         address: 'New York No. 1 Lake Park',         date: '2016-10-03'     },     {         name: 'Jim Green',         age: 24,         address: 'London No. 1 Lake Park',         date: '2016-10-01'     },
element  使用     <el-table       :data="tableData"       style="width: 100%">       <el-table-column         prop="date"         label="日期"         width="180">       </el-table-column>       <el-table-column         prop="name"         label="姓名"         width="180">       </el-table-column>       <el-table-column         prop="address"         label="地址">       </el-table-column>     </el-table>
     tableData: [{             date: '2016-05-02',             name: '王小虎',             address: '上海市普陀区金沙江路 1518 弄'           }, {             date: '2016-05-04',             name: '王小虎',             address: '上海市普陀区金沙江路 1517 弄'           }, {             date: '2016-05-01',             name: '王小虎',             address: '上海市普陀区金沙江路 1519 弄'           }, {             date: '2016-05-03',             name: '王小虎',             address: '上海市普陀区金沙江路 1516 弄'           }]

          ant design pro
          const dataSource = [   {     key: '1',     name: '胡彦斌',     age: 32,     address: '西湖区湖底公园1号',   },   {     key: '2',     name: '胡彦祖',     age: 42,     address: '西湖区湖底公园1号',   }, ];
const columns = [   {     title: '姓名',     dataIndex: 'name',     key: 'name',   },   {     title: '年龄',     dataIndex: 'age',     key: 'age',   },   {     title: '住址',     dataIndex: 'address',     key: 'address',   }, ];
<Table dataSource={dataSource} columns={columns} />;     结论：1. element 表头的变动可以通过，v-show来控制当前列是否显示， iview和ant design pro 则需要整体替换 columns,来达到此效果 2.  element 表头的变动可以通过，v-show来控制当前列是否显示,频繁的切换可能导致。列头显示错乱，建议给变动的项，增加key，

标签：name,title,pro,element,ant,key,address,2016,age
来源： https://www.cnblogs.com/eide/p/15945494.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。