<template>
  <div>
    <lu-table-selected
      stripe
      @update-selected="testFunc"
      :selectedData="selectData"
      :tableData="testData"
      :updated="update"
      :keyword="name"
    >
      <lu-table-column prop="name" label="名称" width="180"> </lu-table-column>
      <lu-table-column prop="address" label="地址" width="180">
      </lu-table-column>
    </lu-table-selected>
    <lu-pagination
      @current-change="changePage"
      layout="prev, pager, next"
      :page-size="5"
      :total="10"
    >
    </lu-pagination>
    <p>{{ selected }}</p>
    <lu-button @click="updatedata">确定</lu-button>
    <lu-button @click="clearSelect">清空选择</lu-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: "name",
      selected: "",
      update: false,
      selectData: [
        {
          checkstatus: true,
          date: "2016-05-22",
          name: "王小小",
          address: "上海市黄浦江边 1123 弄"
        },
        {
          date: "2016-05-11",
          name: "王小五",
          address: "上海市普陀区金沙江路 001 弄"
        }
      ],
      testData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-22",
          name: "王小小",
          address: "上海市黄浦江边 1123 弄"
        },
        {
          date: "2016-05-12",
          name: "王小二",
          address: "上海市普陀区金沙江路 999 弄"
        },
        {
          date: "2016-05-11",
          name: "王小五",
          address: "上海市普陀区金沙江路 001 弄"
        },
        {
          date: "2016-05-13",
          name: "王小七",
          address: "上海市普陀区金沙江路 111 弄"
        }
      ]
    };
  },
  methods: {
    clearSelect() {
      this.selectData = [];
      this.update = true;
    },
    testFunc(val, val1) {
      this.selected = val1;
      this.update = false;
    },
    updatedata() {
      this.update = true;
    },
    changePage(page) {
      this.update = false;
      if (page == 1) {
        this.testData = [
          {
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄"
          },
          {
            date: "2016-05-22",
            name: "王小小",
            address: "上海市黄浦江边 1123 弄"
          },
          {
            date: "2016-05-12",
            name: "王小二",
            address: "上海市普陀区金沙江路 999 弄"
          },
          {
            date: "2016-05-11",
            name: "王小五",
            address: "上海市普陀区金沙江路 001 弄"
          },
          {
            date: "2016-05-13",
            name: "王小七",
            address: "上海市普陀区金沙江路 111 弄"
          }
        ];
      } else {
        this.testData = [
          {
            date: "2016-04-02",
            name: "第二页",
            address: "上海市普陀区金沙江路 1518 弄"
          },
          {
            date: "2016-04-22",
            name: "2王小小",
            address: "上海市黄浦江边 1123 弄"
          },
          {
            date: "2016-04-12",
            name: "2王小二",
            address: "上海市普陀区金沙江路 999 弄"
          },
          {
            date: "2016-04-11",
            name: "2王小五",
            address: "上海市普陀区金沙江路 001 弄"
          },
          {
            date: "22016-04-13",
            name: "2王小七",
            address: "上海市普陀区金沙江路 111 弄"
          }
        ];
      }
    }
  }
};
</script>

<style></style>
