checked和tag标签状态的联动问题

效果图

需求：当上方的checked为选中时，把信息复制到下面的员工选中列表，反之删除员工列表中对应的数据

当点击删除员工列表的标签的时候，对应取消上方checked的选中状态

template

代码语言：html复制

<div class="userForm">
        <div class="filter-wrap">
          <el-input v-model="inputValue" placeholder="请输入内容" />
          <el-button class="fliter-btn" type="primary">查询</el-button>
        </div>
        <el-table v-loading="tableLoading" :data="tableData" element-loading-text="拼命加载中..." style="width: 100%">
          <el-table-column align="center" prop="checked" label="是否选中" width="80">
            <template slot-scope="{row}">
              <el-checkbox v-model="row.checked" @change="handleCheckedChange(row)" />
            </template>
          </el-table-column>
          <el-table-column align="center" prop="personName" label="姓名" />
          <el-table-column align="center" prop="empId" label="员工号" />
          <el-table-column align="center" prop="ehEmpType" label="员工类型" />
        </el-table>
        <div class="tagsTitle">员工选中列表</div>
        <el-tag
          v-for="(item,index) in tags"
          :key="index"
          type="success"
          closable
          @close="handleClose(item)"
        >{{ item }}</el-tag>
      </div>

script

代码语言：javascript复制

   getUserInfo() {
      this.tableLoading = true
      getUserInfo().then(res => {
        console.log(res)
        this.tableLoading = false
        const { objRes } = res
        // this.tableData = objRes.data
        // this.tableData.map(item => {
        //   item.checked = false
        // })
        this.tableData = objRes.data.map(item => {
          item.checked = false
          return item
        })
        console.log('tableData:', this.tableData)
      })
    },
  
  // 复选框选中状态切换
    // 需求一：选中复选框，判断tags里面是否已经有该数据，如果有该数据，则不添加进tags，如果没有该数据，则添加进tags
    // 需求二：取消复选框，对应的tags里面的选项也取消
    handleCheckedChange(row) {
      const tags = [...this.tags]
      const tableData = [...this.tableData]
      const flag = tags.some(tag => {
        return tag === row.personName
      })
      if (!flag) { // tags数组没有该员工，添加
        tableData.forEach(item => {
          if (item.personName === row.personName) {
            tags.push(
              row.personName
            )
            item.checked = true
          }
        })
      } else { // tags数组有该员工，移除
        row.checked = false
        tags.splice(tags.indexOf(row.personName), 1)
      }
      this.tags = tags
      this.tableData = tableData
    },
    // 关闭选中标签
    handleClose(item) {
      // 需求一：删除对应tags里面的数据
      // 需求二：把对应的复选框选中状态取消
      const tags = [...this.tags]
      const tableData = [...this.tableData]
      tags.splice(tags.indexOf(item), 1)
      tableData.forEach(user => { user.personName === item && (user.checked = false) })
      this.tags = tags
      this.tableData = tableData
    }

script 数据

0 人点赞