HUI-VUE-Pro

# BatchSelector 批量选择

版本：1.13.0

开发：郑杰7

交互：苗任越

UI：鲁欣如

规范：[已评审] http://10.33.43.73/BBG_UED/BUI_Design/bscs/bscsapp/issues/76#note_30740

# 安装

$ npm i @hui-pro/batch-selector -D
# 或者
$ yarn add @hui-pro/batch-selector --dev

# 引入

import BatchSelector from '@hui-pro/batch-selector';
import '@hui-pro/batch-selector/theme/index.scss';
Vue.use(BatchSelector);

# 内容不定宽

chosen(15/20)
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
这里添加补充描述
基础用法
<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>

# 内容定宽

chosen(15/20)
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
这里添加补充描述
基础用法
<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>

# 内容列表

chosen(20/100)
  • 1
  • 2
  • 3
  • 4
  • 5
补充说明，这边分页没进行联动，数据是假的
基础用法
<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>

# 自定义添加按钮

chosen(15/20)
0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
这里添加补充描述
基础用法
<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>

# API

# Attributes

参数 说明 类型 可选值 默认值
max-num 最大数量 Number(数字为 0 代表无上限) - 20
label-width 内容宽度 Number - 0(不定宽)
default-params 传入的属性 Object - {name: 'name',id: 'id'}

# 事件

参数 说明
click 添加按钮点击事件

# slot

name 说明
add 1.8.1+ 添加按钮插槽
description 描述插槽

← CascadeSelector 横向级联选择器 →