element-ui-for-gov/packages/user-picker/src/selected-list.js

element-ui for gov

import ElButton from 'element-ui-for-gov/packages/button';
import ElInput from 'element-ui-for-gov/packages/input';

import SectionHeader from './section-header';

const prefix = 'el-user-picker';
export default {
  name: 'SelectedList',
  props: {
    label: String,
    checkedUsers: Array
  },
  components: {ElButton, ElInput, SectionHeader},
  data() {
    return {
      keyword: ''
    };
  },
  methods: {
    uncheckedUser(user) {
      const index = this.checkedUsers.findIndex(item => item === user);
      this.checkedUsers.splice(index, 1);
      this.$emit('unchecked-user');
    }
  },

  render() {
    const {checkedUsers, label} = this;
    const filteredUsers = checkedUsers.filter(item => this.keyword ? item[label].indexOf(this.keyword) > -1 : true);
    return (<div class={`${prefix}__section-wrapper`}>
      <SectionHeader title="已选列表" />
      <div class="filter-wrapper">
        <ElInput value={this.keyword}
          {...{
            on: {
              input: value => {
                this.keyword = value;
              }
            }
          }} prefixIcon="sg-icon sg-icon-fangdajing" placeholder="请输入关键词"/>
      </div>
      <div class={`${prefix}__section-content`}>
        <ul class={`${prefix}__section-list`}>
          {filteredUsers.map(item => (<li>
            {item[label]}
            <i class="el-icon-close" {...{on: {click: this.uncheckedUser.bind(this, item)}}} />
          </li>))}
        </ul>
      </div>
    </div>);
  }
};