同屏幕el-drawer底部按钮固定加自定义滚动条与多选组件

 TravelDataDrawer.vue

<template>
<el-drawer
      :visible.sync="drawer"
      title="选择出行数据"
      size="744px"
      :append-to-body="true"
      :before-close="beforeClose"
  >
    
  <div class="xin-main">
    <div class="xin-content">
         <el-checkbox-group  @change="travelCheck()"
        v-model="TravelData"
        >
         <TravelCard v-for="item in dataList" :key="item.id" class="travel-box">
           <el-checkbox :label="item.id" :key="item.id" class="none-label">
             <br>
           </el-checkbox>
         </TravelCard>
        </el-checkbox-group>
    </div>
    <div class="xin-footer">
        <div class="xin-buttons">
            <el-button  size="medium" @click="drawer = false">取消</el-button>
            <el-button type="primary" size="medium" @click="submit()">确定</el-button>  
        </div>
    </div>
  </div>



</el-drawer>
</template>
<script>
import TravelCard from './TravelCard'
export default {
    name:'TravelDataDrawer',
    components:{
      TravelCard
    },
    props: {
        visible: {
            type: Boolean
        },
        dateTime:{
          type:String,
          default:''
        },
        flowTime:{
            type:String
        },
        outGoing:{
            type:Array
        },
        selected:{
          type:Array,
          default:()=>[]
        }
    },
    data() {
      return {
        drawer:this.visible,
        TravelData:this.selected ? this.selected : [], // 选中的唯一值比如id 与新增与编辑-默认配置
        dataList:[{
          id:1,
          name:'第一名',
        },{
          id:2,
          name:'第二名',
        }],
        submitArr:[], // 提交的出现数据
      };
    },
    watch: {
        drawer(newVal) {
            this.$emit('update:visible', newVal)
        },
        visible(newVal) {           
            this.drawer = newVal
        }
    },
    methods: {
      submit(){
        this.$emit('after-confirm', this.submitArr)
        this.drawer = false
        // console.log(this.submitArr)
      },
      travelCheck(){
          console.log(this.TravelData)
          let arr = []
          this.dataList.map((list) => {
             this.TravelData.map(function(item){
                 if(list.id == item){
                   arr.push(list)
                 }
             })
          })
          this.submitArr = arr
          console.log(arr)

      },
      beforeClose(done) {
          // const isModified = JSON.stringify(this.originForm) != JSON.stringify(this.form)
          // if (isModified) {
              // this.showConfirm({
              //     afterConfirm: () => {
              //         done()
              //     }
              // })
          // }
          // else {
              done()
          // }
      },
    },
    created(){
      
    }
  };
</script>
<style scoped lang="scss">
.travel-box{
  margin-left: 32px;
  margin-right: 28px;
}
.none-label{
  /deep/ .el-checkbox__label{
    display: none;
  }
}

.xin-main{
  position: relative;
  height: 100%;
  // padding: 0 0 0 px(32);
  overflow: hidden;
  .xin-content{
    height: calc(100% - 72px);
    overflow-y: scroll;
    box-sizing: border-box;
    overflow-x: hidden;
    padding-top: 20px;
    &::-webkit-scrollbar{
      width: 6px;
      height: 6px;
    }
    &::-webkit-scrollbar-thumb {
      background-color: rgba(210, 217, 230, 0.39);
      border-radius: 2px;
    }
  }
}

.xin-footer{
  position:absolute;
  // bottom: px(30);
  // margin-top: px(40);
  box-sizing: border-box;
  padding: 0 32px;
  width: 100%;
  height: 66px;
  line-height: 66px;
  width: 100%;
  text-align: center;
  box-shadow: 0px -2px 4px 0px rgba(144, 175, 238, 0.15);
  .xin-buttons{
    /deep/ .el-button{
      box-sizing: border-box;
     
      padding: 10px 24px;
      margin: 0 12px;
      border: none;
      span{
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        height: 20px;
      }
    }
  }
}
</style>

TravelCard.vue

<template>

        <div class="travel">
            <div class="travel-header">
                <div class="travel-name">先出行行程<label class="travel-tip">行程不符</label></div>
                <div class="travel-slot">
                    <slot></slot>
                </div>               
            </div>
            <div class="travel-content">
                <div class="travel-area">
                   <div class="travel-item travel-start">广州市天河区</div>
                   <div class="travel-item travel-end">广州市番禺区广州南站</div>
                </div>
                <div class="travel-info">
                   <div class="travel-item">行程时间 07月05日 10:10 - 07月05</div>
                   <div class="travel-item">预计里程 10.05 km</div>
                   <div class="travel-item">用车类型 租赁车</div>
                   <div class="travel-item">所属主体 广州</div>
                </div>
            </div>
        </div>

</template>
<script>
export default {
    name:'TravelCard',
    props: {

    },
    data() {
      return {
        checkedCities:[]
      };
    },
    watch: {

    },
    methods: {
        travelCheck(data){
          console.log(this.checkedCities)
        },
    },
    created(){
      
    }
  };
</script>
<style scoped lang="scss">
.travel{
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #EDF1F7;
    overflow: hidden; 
    margin-bottom: 20px;
    .travel-header{
       height: 48px;
       line-height: 48px;
       background: #FBFBFC;
       border-radius: 4px 4px 0px 0px;
       font-size: 14px;
       font-family: PingFangSC-Medium, PingFang SC;
       font-weight: 500;
       color: #303133;
       display: flex;
       justify-content: space-between;
       .travel-name{
        padding-left: 16px;
        .travel-tip{
            display: inline-block;
            padding: 0 4px;
            margin-left: 14px;
            font-size: 12px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FE964D;
            line-height: 20px;
            background: rgba(254, 150, 77, 0.2);
        }
       }
       .travel-slot{
        padding-right: 16px;
       }
    }
    .travel-content{
      min-height: px(169);
      box-sizing: border-box;
      padding: 16px;
      .travel-area{
        border-bottom: 1px solid rgba(236, 241, 248, 1);
        min-height: 68px;
        // padding-bottom: 16px;
        .travel-item{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #303133;
            line-height: 22px;
            margin-bottom: 8px;
        }
        .travel-start{
          padding-left: 21px;
          position: relative;
          &::before{
            position:absolute;
            margin-top:5px;
            margin-left: -20px;
            content: '';
            width: 8px;
            height: 8px;
            border: 2px solid #4ABCA2;
            border-radius: 50%;
            background: #fff;
          }
        }
        .travel-end{
          padding-left: 21px;
          position: relative;
          &::before{
            position:absolute;
            margin-top:5px;
            margin-left: -20px;
            content: '';
            width: 8px;
            height: 8px;
            border: 2px solid #FE964D;
            border-radius: 50%;
            background: #fff;
          }
        }
      }
      .travel-info{
        padding-top:16px;
        .travel-item{
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #303133;
            line-height: 22px;
            margin-bottom: 8px;
        }
      }
    }
}
</style>

 import TravelDataDrawer from './components/TravelDataDrawer'

 <!-- 选择出行数据 -->
    <TravelDataDrawer :visible.sync="drawer.travel" @after-confirm="confirm">
    </TravelDataDrawer>

效果图：