iview pageTable type:selection时自定义选框样式

在 iView 的 `PageTable` 中，当设置 `type:selection` 时，可以对选框进行自定义样式。可以通过以下两种方式实现：

1. 通过 `slot-scope` 自定义选框

在 `PageTable` 组件的 `selection` 插槽中，可以自定义选框的样式。例如：

<template>
  <PageTable :columns="columns" :data="data" :type="'selection'">
    <template slot="selection" slot-scope="{ row, $index }">
      <div class="my-checkbox" @click="onSelect($index)">
        <Icon :type="isSelected($index) ? 'md-checkmark' : 'md-square-outline'" />
      </div>
    </template>
  </PageTable>
</template>

<script>
export default {
  data () {
    return {
      selected: []
    }
  },
  methods: {
    onSelect (index) {
      const i = this.selected.indexOf(index)
      if (i > -1) {
        this.selected.splice(i, 1)
      } else {
        this.selected.push(index)
      }
    },
    isSelected (index) {
      return this.selected.indexOf(index) > -1
    }
  }
}
</script>

<style scoped>
.my-checkbox {
  cursor: pointer;
  width: 20px;
  height: 20px;
  border: 1px solid #999;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

其中，`isSelected` 方法用于判断某一行是否被选中，`onSelect` 方法用于处理选中事件。

2. 通过 CSS 自定义选框

可以通过 CSS 自定义选框的样式，例如：

<template>
  <PageTable :columns="columns" :data="data" :type="'selection'" class="my-table">
  </PageTable>
</template>

<style scoped>
.my-table .ivu-checkbox {
  margin-right: 10px;
}

.my-table .ivu-checkbox .ivu-checkbox-input {
  border: 1px solid #999;
  background-color: #fff;
  border-radius: 4px;
}

.my-table .ivu-checkbox .ivu-checkbox-inner {
  width: 16px;
  height: 16px;
}

.my-table .ivu-checkbox .ivu-checkbox-inner::after {
  width: 8px;
  height: 8px;
  top: 3px;
  left: 3px;
  border-radius: 2px;
  background-color: #333;
}
</style>

其中，`.ivu-checkbox` 是 iView 内置的选框类名，可以通过该类名对选框进行样式定制。