<center id="qkqgy"><optgroup id="qkqgy"></optgroup></center>
  • <menu id="qkqgy"></menu>
    <nav id="qkqgy"></nav>
    <xmp id="qkqgy"><nav id="qkqgy"></nav>
  • <xmp id="qkqgy"><menu id="qkqgy"></menu>
    <menu id="qkqgy"><menu id="qkqgy"></menu></menu>
    <tt id="qkqgy"><tt id="qkqgy"></tt></tt>

  • element仿照EXCEL
    和后端交互數據聯動篩選
    公司要el-table基礎上實現一個excel的功能,element的不能滿足我的需求于是自己寫了一個。

    <>tableTool.vue組件實現
    組件介紹:組件為篩選框,配合element中el-table使用 使用示例: <i class="el-icon-caret-bottom"
    @click="filterData($event,'date')"></i> <tableTool v-if="showFilterTool"
    ref="tableTool" :seachData="seachData" @saveSeach="saveSeach"
    :allOptionsObj="allOptionsObj" :seachType="seachType"
    :filterToolLeft="filterToolLeft" :filterToolTop="filterToolTop"
    @closeTool="closeTool" />
    在父組件中請使用showFilterTool來控制tableTool,父組件給一個控件添加點擊事件,拿到點擊事件的位置及需要處理的數據是屬于哪一個方法如下:
    filterData(e,type){ this.showFilterTool = false //點擊區域控件觸發時可以關閉當前的篩選框
    this.$nextTick(()=>{ this.seachType = type this.filterToolTop = e.pageY
    //拿到小工具的位置 this.filterToolLeft = e.pageX //拿到小工具的位置 this.showFilterTool = true
    }) }, seachData:查詢結果數據,可以讓父級傳過來進行回填注意數據結構應該為{ key:[],key1:[],....} seachData:{
    name:[], address:[], date:[], }
    allOptionsObj:所有的可查詢條件,數據結構和seachData一樣,并且key值一樣 allOptionsObj:{
    name:['王小虎','小明','小紅','小蘭'], address:['北京','上海','廣州','深圳','長沙'],
    date:['2016','2017','2018','2019'], }, seachType:需要查詢的key(seachData的key中的一個)
    seachType:'name' //默認 filterToolTop、filterToolLeft:拿到點擊控件的位置得到的傳入數值即可
    filterToolTop:0, filterToolLeft:0, saveSeach:點擊確認向父組件發送的事件,用于將篩選的結果傳給父級
    saveSeach(data){ console.log(data); this.seachData = data this.closeTool() },
    closeTool:點擊取消向父級發送的事件。 closeTool(){ this.showFilterTool = false }, <template> <
    divclass="tableTool" :style="{top:filterToolTop + 10 +'px',left:filterToolLeft
    +'px'}"> <el-input v-model="keyword" prefix-icon="el-input__icon el-icon-search"
    type="text" placeholder="搜索" @input="seachKey" oninput=
    "if(value.length>11)value=value.slice(0,100)"> </el-input> <div class=
    "select-box"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
    @change="handleCheckAllChange" id="checkAll">全選</el-checkbox> <el-checkbox-
    group v-model="checkedList" @change="handleCheckedCitiesChange"> <el-checkbox v-
    for="(item,index) in options" :label="item" :key="index"> </el-checkbox> </el-
    checkbox-group> </div> <div class="bottom"> <el-button size="mini" @click=
    "$emit('closeTool')">取消</el-button> <el-button type="primary" size="mini" @click
    ="save">確認</el-button> </div> <i class="el-icon-caret-top"></i> </div> </
    template> <script> export default { name:'tableCol', props:{ filterToolLeft:{
    required:true, type:Number }, filterToolTop:{ required:true, type:Number }, //
    已經選中的數據 seachData:{ required:true, type:Object }, // 正在更改哪個 seachType:{ required
    :true, type:String }, // 需要后端給的所有數據 allOptionsObj:{ required:true, type:Object }
    , useTableToolComponent:{ default:null } }, data() { return { keyword:'',
    checkAll: false, checkedList: [], options: [], isIndeterminate: true, allOptions
    :[] }; }, methods: { handleCheckAllChange(val) { this.checkedList = val ? this.
    allOptions: []; this.isIndeterminate = false; }, handleCheckedCitiesChange(value
    ) { let checkedCount = value.length; this.checkAll = checkedCount === this.
    options.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.
    options.length; }, save(){ this.seachData[this.seachType] = this.checkedList //
    把查詢條件給父組件 this.$emit('saveSeach',this.seachData) }, seachKey(){ this.allOptions
    = this.allOptionsObj[this.seachType].filter(item=>item.indexOf(this.keyword)!= -
    1) this.options = this.allOptions this.checkedList = [] this.checkAll = false },
    setposition(){ let boxEl = document.querySelector('.tableTool') let icon =
    document.querySelector('.tableTool .el-icon-caret-top') if(this.filterToolLeft +
    boxEl.offsetWidth + 48 > document.body.clientWidth){ boxEl.style.transform =
    'translateX(-90%)'; icon.style.left = '90%' } }, }, created(){ }, async mounted(
    ){ this.allOptions = this.allOptionsObj[this.seachType] this.options = this.
    allOptions document.querySelector('#checkAll').click() this.setposition() },
    beforeMount(){ let that = this this._close = e=>{ let isFlag = that.$el.contains
    (e.target) || e.target.className.indexOf('el-icon-caret-bottom') != -1 if(!
    isFlag){ that.$emit('closeTool') } } document.body.addEventListener('click',this
    ._close) }, beforeDestroy(){ document.body.removeEventListener('click',this.
    _close) }, }; </script> <style lang="scss" scoped> .tableTool{ position: fixed;
    background: #fff; box-shadow:0 0 5px #ccc; padding: 10px; z-index: 999; /deep/.
    el-input__inner{ padding-left: 30px; } .select-box{ border: #ccc solid 1px;
    padding: 10px; margin-top: 10px; max-height: 280px; overflow: auto; max-width:
    400px; } /deep/ .el-checkbox{ display: block; margin-top: 5px; } .bottom{
    display: flex; justify-content: flex-end; margin-top: 10px; } .el-icon-caret-top
    { position: absolute; color: #fff; top: -10px; } } </style>
    <>使用組件
    <template> <div> <el-table :data="tableList" max-height="500" border > <el-
    table-column prop="name" label="姓名"> <template v-slot:header> <div> <span class=
    "table-heard-filter">姓名</span> <i class="el-icon-caret-bottom" @click=
    "filterData($event,'name')"></i> </div> </template> </el-table-column> <el-table
    -column prop="address" label="地址" > <template v-slot:header> <div> <span class=
    "table-heard-filter">地址</span> <i class="el-icon-caret-bottom" @click=
    "filterData($event,'address')"></i> </div> </template> </el-table-column> <el-
    table-column prop="date" label="時間"> <template v-slot:header> <div> <span class=
    "table-heard-filter">時間</span> <i class="el-icon-caret-bottom" @click=
    "filterData($event,'date')"></i> </div> </template> </el-table-column> </el-
    table> <tableTool v-if="showFilterTool" :seachData="seachData" @saveSeach=
    "saveSeach" :allOptionsObj="allOptionsObj" :seachType="seachType" :
    filterToolLeft="filterToolLeft" :filterToolTop="filterToolTop" @closeTool=
    "closeTool" /> </div> </template> <script> import tableTool from
    './tableTool.vue' export default { name:'test', components:{ tableTool }, data()
    { return{ seachData:{ name:[], address:[], date:[], }, seachType:'',
    allOptionsObj:{ name:['王小虎','小明','小紅','小蘭'], address:['北京','上海','廣州','深圳','長沙'],
    date:['2016','2017','2017','2019'], }, positionTypeList:[], tableList:[], //
    分頁數據 editType:'', showFilterTool:false, filterToolTop:0, filterToolLeft:0, } },
    methods:{ filterData(e,type){ this.showFilterTool = false this.$nextTick(()=>{
    this.seachType = type this.filterToolTop = e.pageY this.filterToolLeft = e.pageX
    this.showFilterTool = true }) }, closeTool(){ this.showFilterTool = false },
    saveSeach(data){ console.log(data); this.seachData = data this.closeTool() },
    close(){ this.showAdd = false }, saveBatch(data){ // 查詢條件 console.log(data); },
    getList(){ this.tableList = [{ date: '2019', name: '王小虎', address: '上海' }, {
    date: '2016', name: '小明', address: '北京' }, { date: '2017', name: '小紅', address:
    '長沙' }, { date: '2018', name: '小蘭', address: '深圳' },{ date: '2018', name: '小蘭',
    address: '長沙' }] } }, created(){ this.getList() } } </script> <style lang="less"
    scoped> .table-heard-filter{ margin-right: 10px !important; } .fitlter-btn{
    border: #000 solid 1px; padding: 1px; background: #1890FF; color: #fff; border-
    radius: 5px; } </style>
    各種數據請使用后臺接口獲取。

    <>實現效果

    技術
    下載桌面版
    GitHub
    百度網盤(提取碼:draw)
    Gitee
    云服務器優惠
    阿里云優惠券
    騰訊云優惠券
    華為云優惠券
    站點信息
    問題反饋
    郵箱:ixiaoyang8@qq.com
    QQ群:766591547
    關注微信
    巨胸美乳无码人妻视频