# BatchSelector 批量选择

<h-batch-selector :defaultParams="defaultParams" v-model="list">
  <template slot="description">
    这里添加补充描述
  </template>
</h-batch-selector>

<script>
  export default {
    data() {
      return {
        defaultParams: {
          name: 'label', // 展示的名称
          id: 'id' // 唯一标示id
        },
        list: []
      };
    },
    created() {
      for (let i = 0; i < 100; i++) {
        this.list.push({
          label: i,
          id: i
        });
      }
    }
  };
</script>

<h-batch-selector
  :labelWidth="96"
  :defaultParams="defaultParams"
  v-model="list2"
>
  <template slot="description">
    这里添加补充描述
  </template>
</h-batch-selector>

<script>
  export default {
    data() {
      return {
        defaultParams: {
          name: 'label', // 展示的名称
          id: 'id' // 唯一标示id
        },
        list: []
      };
    },
    created() {
      for (let i = 0; i < 100; i++) {
        this.list2.push({
          label: i,
          id: i
        });
      }
    }
  };
</script>

<h-batch-selector
  :maxNum="100"
  :labelWidth="96"
  :defaultParams="defaultParams"
  v-model="tableList"
>
  <template slot="batchTable">
    <el-table :data="tableList" max-height="250" style="width: 100%">
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="state" label="设备状态"></el-table-column>
      <el-table-column prop="IP" label="IP"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button icon="h-icon-edit" size="mini"></el-button>
          <el-button
            icon="h-icon-delete"
            size="mini"
            @click="remove(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="selectd-pagination-container"
      small
      layout="prev, pager, next"
      :total="50"
    ></el-pagination>
  </template>
  <template slot="description">
    补充说明，这边分页没进行联动，数据是假的
  </template>
</h-batch-selector>

<script>
  export default {
    name: 'form-normal',
    props: {
      breadcrumbObj: {
        type: Object,
        debufult: {}
      }
    },
    data() {
      return {
        defaultParams: {
          name: 'label', // 展示的名称
          id: 'id' // 唯一标示id
        },
        tableList: []
      };
    },
    created() {
      for (let i = 0; i < 20; i++) {
        this.tableList.push({
          id: i,
          name: i,
          state: '离线',
          IP: '10.10.10.11'
        });
      }
    },
    methods: {
      remove(id) {
        this.tableList = this.tableList.filter(item => {
          return id !== item.id;
        });
      }
    }
  };
</script>

<h-batch-selector :defaultParams="defaultParams" v-model="list">
  <template slot="add">
    <el-button type="primary">主要按钮</el-button>
  </template>
  <template slot="description">
    这里添加补充描述
  </template>
</h-batch-selector>

<script>
  export default {
    data() {
      return {
        defaultParams: {
          name: 'label', // 展示的名称
          id: 'id' // 唯一标示id
        },
        list: []
      };
    },
    created() {
      for (let i = 0; i < 100; i++) {
        this.list.push({
          label: i,
          id: i
        });
      }
    }
  };
</script>