<template>
  <div class="demo-table-fixed-columns">
    <ui-table
      :data-source="dataSource"
      :columns="columns"></ui-table>
  </div>
</template>

<script>
import { Table } from "amumu-ui"

const dataSource = []

for (let i = 0; i < 5; i++) {
  dataSource.push({
    id: `TASK-${10000000 + i}`,
    title: `组件升级&替换计划-BUG-${100023 + i}`,
    status: "待处理",
    createTime: "2018-06-06 11:34:20",
    creator: "STAR_LORD",
    handler: "吴彦祖",
  })
}

export default {
  components: {
    "ui-table": Table,
  },
  data() {
    return {
      dataSource: dataSource,
      columns: [
        {
          title: "ID",
          key: "id",
          fixed: "left",
          width: 150,
        },
        {
          title: "标题",
          key: "title",
          width: 300,
        },
        {
          title: "状态",
          key: "status",
        },
        {
          title: "创建时间",
          key: "createTime",
          width: 200,
        },
        {
          title: "创建人",
          key: "creator",
          width: 150,
        },
        {
          title: "处理人",
          key: "handler",
        },
        {
          title: "操作",
          key: "operate",
          render: ({ row, rowIndex }) => {
            return <a onClick={this.deleteRow.bind(this, row, rowIndex)}>删除</a>
          },
          fixed: "right",
        },
      ],
    }
  },
  methods: {
    deleteRow(row, index) {
      this.dataSource.splice(index, 1)
    },
  },
}
</script>
