ant.design.vue table心得

创建table的两种方式

//第一种方式就是自动生成表格
<template>
<a-table :columns="columns" :dataSource="data" size="middle" />
</template>

<script>
const columns = [{
  title: 'Name',
  dataIndex: 'name',
}, {
  title: 'Age',
  dataIndex: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
}];
const data = [{
  key: '1',
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
}, {
  key: '2',
  name: 'Jim Green',
  age: 42,
  address: 'London No. 1 Lake Park',
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
}];
export default {
  data() {
    return {
      data,
      columns,
    }
  }
}
</script>
//当然这种方式也可以像第一种方式一样在template中写，本人就就喜欢这种方式，他就是第二种方式的结合。
//像这样   注意 ‘>’

<template>
  <div>
    <a-table bordered :dataSource="dataSource" :columns="columns">
//只要在table里面用上template就可以了
>       <template slot="operation" slot-scope="text, record">
>         <a-popconfirm
>           v-if="dataSource.length"
>           title="Sure to delete?"
>           @confirm="() => onDelete(record.key)">
>           <a href="javascript:;">Delete</a>
>         </a-popconfirm>
>       </template>
    </a-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      dataSource: [{
        key: '0',
        name: 'Edward King 0',
        age: '32',
        address: 'London, Park Lane no. 0',
      }, {
        key: '1',
        name: 'Edward King 1',
        age: '32',
        address: 'London, Park Lane no. 1',
      }],
      count: 2,
      columns: [{
        title: 'name',
        dataIndex: 'name',
        width: '30%',
        scopedSlots: { customRender: 'name' },
      }, {
        title: 'age',
        dataIndex: 'age',
      }, {
        title: 'address',
        dataIndex: 'address',
      }, {
        title: 'operation',
        dataIndex: 'operation',
        //这里要加上条件，其实对比一下就看出来了
		> 	scopedSlots: { customRender: 'operation' },
      }],
    }
  },
  methods: {
    onCellChange (key, dataIndex, value) {
        const dataSource = [...this.dataSource]
        const target = dataSource.find(item => item.key === key)
        if (target) {
          target[dataIndex] = value
          this.dataSource = dataSource
        }
    },
    onDelete (key) {
      const dataSource = [...this.dataSource]
      this.dataSource = dataSource.filter(item => item.key !== key)
    },
    handleAdd () {
      const { count, dataSource } = this
      const newData = {
        key: count,
        name: `Edward King ${count}`,
        age: 32,
        address: `London, Park Lane no. ${count}`,
      }
      this.dataSource = [...dataSource, newData]
      this.count = count + 1
    },
  },
}
</script>

//第二种方式， 其实我们有时候是需要用这种方式的，因为我们可能一个td里面不知有数据，可能还会有图标，不同的样式等等，这样方式就是我们想要的了，当然这是我用的时候的需求了
<template>
  <a-table :dataSource="data">
    <a-table-column-group>
      <span slot="title" style="color: #1890ff">Name</span>
      <a-table-column
        dataIndex="firstName"
        key="firstName"
      >
        <span slot="title" style="color: #1890ff">First Name</span>
      </a-table-column>
      <a-table-column
        title="Last Name"
        dataIndex="lastName"
        key="lastName"
      />
    </a-table-column-group>
    <a-table-column
      title="Age"
      dataIndex="age"
      key="age"
    />
    <a-table-column
      title="Address"
      dataIndex="address"
      key="address"
    />
    <a-table-column
      title="Tags"
      dataIndex="tags"
      key="tags"
    >
      <template slot-scope="tags">
        <span>
          <a-tag v-for="tag in tags" color="blue" :key="tag">{{tag}}</a-tag>
        </span>
      </template>
    </a-table-column>
    <a-table-column
      title="Action"
      key="action"
    >
      <template slot-scope="text, record">
        <span>
          <a href="javascript:;">Action 一 {{record.firstName}}</a>
          <a-divider type="vertical" />
          <a href="javascript:;">Delete</a>
        </span>
      </template>
    </a-table-column>
  </a-table>
</template>

<script>
const data = [{
  key: '1',
  firstName: 'John',
  lastName: 'Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
  tags: ['nice', 'developer'],
}, {
  key: '2',
  firstName: 'Jim',
  lastName: 'Green',
  age: 42,
  address: 'London No. 1 Lake Park',
  tags: ['loser'],
}, {
  key: '3',
  firstName: 'Joe',
  lastName: 'Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
  tags: ['cool', 'teacher'],
}];

export default {
  data() {
    return {
      data,
    }
  }
}
</script>

哈哈，其还是应该多看看文档，总结一句话，如果你的项目选择用这个框架的话，那么你就要页面所有的东西都用这个框架，这样才会统一。我还更新这个框架的东西的，因为最近我会经常使用这个框架的，希望能帮助大家！！！