soc_app/src/components/SearchSelectCell/SelectPicker.vue

<template>
  <van-popup class="search-data-popup" round lazy-render v-model="show" position="bottom" >
    <div class="header-line">
      <div class="cancel" @click="onSearchCancel">取消</div>
      <div class="title">{{ title }}</div>
      <div class="sure" @click="onSearchConfirm">确定</div>
    </div>
    <van-search v-if="showSearch" placeholder="输入您想搜索的内容" v-model="searchValue" @input="inputSearchValue" />
<!--    <div class="tip">已选{{temp_datas.length}}条</div>-->
    <div v-if="itemList?.length >0"  class="lists">
      <div  class="line" v-for="(item, index) in itemList" :key="item[valueKey]">

        <van-cell
          clickable
          :key="item[valueKey]"
          :title="item[valueKey]"
          @click="click(item,index)">
          <template #right-icon>
            <van-checkbox v-model="item.checked"/>
          </template>
        </van-cell>
      </div>
    </div>
    <div v-else class="lists">
      <van-empty description="暂无数据" />
    </div>
  </van-popup>
</template>
<script>
export default {
  props: {
    showPicker: {
      types:Boolean,
      default:false
    }, //是否显示
    options: {
      type:Array,
      default: ()=>[],
    }, //未根据搜索内容筛选的所有列表数据
    value: {
      type:Array,
      default: ()=>[],
    },//默认选中数据
    //自定义字段
    valueKey:{
      type: String,
      default:'label'
    },
    showSearch:{
      type:Boolean,
      default:true
    },
    title: String //标题
  },
  data(){
    return {
      searchValue: "", //搜索框内容
      itemList:[],
    }
  },
  watch:{
    temp_datas:{
      handler(val){
        this.itemList = val;
      },
      deep:true
    },
  },
  computed: {
    columns(){
      return this.options
    },
    temp_datas(){
      this.columns.forEach(v=>{
        this.value.forEach((item)=>{
          if(v[this.valueKey] === item[this.valueKey]){
            v.checked = true;
          }else {
            v.checked = false;
          }
        })
      })
      return this.columns
    },
    show:{
      get(){
        return this.showPicker;
      },
      set(){
        this.$emit("cancel");
      },
    },
  },
  methods: {
    click(v,i){
      this.$set(this.columns[i],'checked',!this.columns[i].checked);
    },
    inputSearchValue(query) {
      if(query == ''){return this.itemList = this.options }
      //搜索框值发生改变
      setTimeout(() => {
        this.itemList= this.temp_datas.filter(item => {
          return item[this.valueKey].indexOf(query.toLowerCase()) > -1;
        });
      }, 200);
    },
    onSearchCancel() {
      //取消
      this.$emit("cancel");
    },
    onSearchConfirm() {
      let arr = this.columns.filter(v=>v.checked === true)
      //确认
      this.$emit("confirm", arr);
      this.show = false;
    },
  },
}
</script>
<style scoped>
.search-data-popup .tip {
  color: #666;
  padding-bottom: 5px;
}
.search-data-popup .header-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 90px;
}
.search-data-popup .header-line .cancel {
  padding: 0 30px;
  font-size: 28px;
  color: #969799;
}
.search-data-popup .header-line .title {
  font-weight: 500;
  font-size: 30px;
  color: #343434;
}
.search-data-popup .header-line .sure {
  padding: 0 30px;
  font-size: 28px;
  color: #1989fa;
}
.search-data-popup .lists {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 20px 12px;
  min-height: 300px;
  max-height: 700px;
  overflow: auto;
}
.search-data-popup .lists .line {
  line-height: 40px;
  font-size: 16px;
  color: #000;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.search-data-popup .lists .line img {
  width: 20px;
  height: 20px;
}
</style>