iview ，element 和ant design pro 中table组件的使用特点

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，