【element-ui】前端使用el-table自定义表头数据左右移动_elementui表格数据左移右移

一、模拟假数据

<template>
  <div class="about">
    <h1>
      <button>导入</button>
      <el-checkbox-group v-model="form.checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="city in cities" :label="city.value" :value="city.value" :key="city.value">{{city.name}}</el-checkbox>
      </el-checkbox-group>
    </h1>
    <br>
    <div class="box2">
      <el-table :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="date" label="日期">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
      <div style="padding-top:100px;" class="center-box">
        <p>
          <el-button @click="handlerRight">向右移动</el-button>
        </p>
        <p>
          <el-button @click="handlerLeft">向左移动</el-button>
        </p>
      </div>
      <el-table :data="rightData" @selection-change="handleSelectionChange1">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="date" label="日期">
        </el-table-column>
        <el-table-column prop="name" label="姓名">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
    </div>
 
    <el-button type="success" style="margin-top:20px" @click="handelerTop">提交表头数据</el-button>
 
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        checkedCities: [2, 3]
      },
      tableData: [],
      rightData: [],
      // checkedCities: [],
      cities: [{ name: '北京', value: 2 }, { name: '上海', value: 5 }, { name: '广州', value: 6 }, { name: '深圳', value: 8 }],
      selectLeft: [],
      selectRight: [],
    };
  },
  created() {
    let data = [{
      id: 21,
      date: '2016-05-02',
      name: '008',
      address: '上海市普陀区金沙江路 1518 弄'
    }, {
      id: 22,
      date: '2016-05-04',
      name: '009',
      address: '上海市普陀区金沙江路 1517 弄'
    }, {
      id: 30,
      date: '2016-05-01',
      name: '100',
      address: '上海市普陀区金沙江路 1519 弄'
    }, {
      id: 25,
      date: '2016-05-03',
      name: '101',
      address: '上海市普陀区金沙江路 1516 弄'
    }]
    this.tableData = data
 
 
    let rightdata = [{
      id: 0,
      date: '2016-05-02',
      name: '001',
      address: '上海市普陀区金沙江路 1518 弄'
    }, {
      id: 1,
      date: '2016-05-04',
      name: '002',
      address: '上海市普陀区金沙江路 1517 弄'
    }, {
      id: 2,
      date: '2016-05-01',
      name: '003',
      address: '上海市普陀区金沙江路 1519 弄'
    }, {
      id: 3,
      date: '2016-05-03',
      name: '004',
      address: '上海市普陀区金沙江路 1516 弄'
    }]
    this.rightData = rightdata
  },
  methods: {
    handleCheckedCitiesChange(value) {
      console.log(value);
    },
    handleSelectionChange(val) {
      this.selectLeft = val
    },
    handleSelectionChange1(val) {
      this.selectRight = val
    },
    handlerRight() {
      if (this.tableData.length === 0) {
        this.$message.warning('数据为空，无法右移')
        return
      }
      if (this.selectLeft.length === 0) {
        this.$message.error('请先选择左侧数据')
        return
      }
 
      this.selectLeft.forEach((item) => {
        this.rightData.push(item)
        this.tableData.forEach((item1, index) => {
          if (item1.id == item.id) {
            this.tableData.splice(index, 1)
          }
        })
      })
      let tempObj = {}
      let arr = this.tableData.reduce((it, next) => {
        tempObj[next.name] ? '' : tempObj[next.name] = true && it.push(next)
        return it
      }, [])
      this.tableData = arr
      this.selectRight = []
    },
    handlerLeft() {
      if (this.rightData.length === 0) {
        this.$message.warning('数据为空，无法左移')
        return
      }
      if (this.selectRight.length === 0) {
        this.$message.error('请先选择右侧数据')
        return
      }
      this.selectRight.forEach((item) => {
        this.tableData.push(item)
        this.rightData.forEach((item1, index) => {
          if (item1.id == item.id) {
            this.rightData.splice(index, 1)
          }
        })
      })
      let tempObj = {}
      let arr = this.rightData.reduce((it, next) => {
        tempObj[next.name] ? '' : tempObj[next.name] = true && it.push(next)
        return it
      }, [])
      this.rightData = arr
      this.selectRight = []
    },
    handelerTop() {
      let objData = []
      this.rightData.map((item, index) => {
        objData.push({ id: index, date: item.date, name: item.name, address: item.address })
      })
      console.log(objData);
    }
  }
};
</script>
 
<style lang="less" scoped>
.box2 {
  display: flex;
  padding: 0 30px;
  .center-box {
    cursor: pointer;
  }
}
</style>

 二、展示