element弹框表格选择后分页回显

44 篇文章 0 订阅

父:

<!-- 选择员工 -->
<employee-dialog
    :showDialog.sync="showDialog"
    :employees="employees"
    @submit="submitDialog"
></employee-dialog>

submitDialog(data){
  this.employees = data
},

 子弹框:

<el-dialog
    :visible.sync="open"
    title="员工列表"
    width="50%"
>
  <div class="myDialogBox gy-table-multiple gy-table-sort">
    <el-table
        ref="multipleTable"
        v-loading="loading"
        :data="tableData"
        border
        class="mt20"
        :row-key="getRowKeys"
        tooltip-effect="dark"
        :row-style="rowClass"
        @select="handleSelectionChange"
    >
      <el-table-column type="selection" align="center" :reserve-selection="true" />
      <el-table-column label="序号" width="60" align="center">
        <template slot-scope="scope">
          {{ (pageIndex - 1) * pageSize + +scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="nickName" label="姓名" min-width="100" />
      <el-table-column prop="phone" label="联系方式" min-width="120" />
    </el-table>
    <el-pagination
        v-if="total > 0"
        background
        layout="total, sizes, prev, pager, next"
        :page-sizes="pageSizes"
        :page-size.sync="pageSize"
        :current-page.sync="pageIndex"
        :total="total"
        class="pagination tr mt10 mb20"
        @size-change="loadData"
        @current-change="loadData"
    />

   <div class="tc">
     <el-button @click="open=!open">取消</el-button>
     <el-button type="primary" @click="submit()">确认</el-button>
   </div>
  </div>
</el-dialog>
props:{
  showDialog:  {
    type: Boolean,
    default: false
  },
  employees: {
    type: Array,
    default: ()=>[]
  },
},

total: 0,
pageIndex: 1,
pageSize: 5,
pageSizes: [5, 10],
loading: true,
tableData: [],
selectRow: [], // 选中行
selectData: [], // 选中数据
allSelect: false, // 列表全选与否


computed: {
  ...mapGetters(['userId', 'tenantId', 'housingEstate_id', 'privileges', 'isSuper']),
  open: {
    get() {
      return this.showDialog
    },
    set(val) {
      if(val){
        this.loadData()
      }
      this.$emit('update:showDialog', val)
    }
  },
},

watch: {
  open(val){
    if(val){
      this.selectData = []
      this.loadData()
    }
  },
  // selectData(data) {
    // this.selectRow = []
    // if (data.length > 0) {
    //   data.forEach((item) => {
     //    this.selectRow.push(this.tableData.indexOf(item))
    //   })
   //  }
  // }
},


// 方法

    // 加载员工列表
    loadData() {
      this.loading = true
      const { pageIndex, pageSize } = this
      UsersGetListByPage({
        pageIndex,
        pageSize,
        filter_fieldone: this.tenantId,
        ...this.schData
      }).then(res => {
        this.tableData = res.response.data
        this.total = res.response.dataCount
        if(this.employees.length>0){
          this.selectData = this.employees
          const selectDataId = this.employees.map(obj => obj.id)
          this.$refs.multipleTable.clearSelection();
          this.$nextTick(()=>{
            let list = [...this.employees,...this.selectData]
            this.selectData= [...new Set(list.map(item=>JSON.stringify(item)))].map(i=>JSON.parse(i))
            this.tableData.forEach(row => {
              if(selectDataId.includes(row.id)){
                this.$refs.multipleTable.toggleRowSelection(row);
                this.loading = false
              }
            });
          })
        }else{
          this.loading = false
          if(this.selectData.length==0) return this.$refs.multipleTable.clearSelection();
        }
      })
    },
    // 批量选取
    handleSelectionChange(row, val) {
      const v = row.find(v => val.id == v.id)
      if (v) {
        this.selectData.push(v)
      } else {
        let selectDataId = this.selectData.map(obj => obj.id)
        const obj = selectDataId.indexOf(val.id)
        if (obj != -1) {
          this.selectData.splice(obj, 1)
        }
      }

    },
    rowClass({ rowIndex }) {
      if (this.selectRow.includes(rowIndex)) {
        return { 'background': '#fafafa' }
      }
    },
    getRowKeys(row) {
      return row.id
    },
    submit() {
      if(this.selectData.length===0) return this.$message.error('请选择指派员工')
      this.$emit('update:showDialog', false)
      this.$emit('submit', this.selectData)
    },

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值