table中实现数据上移下移效果

Posted 2020-10-16 karila

html

由于vue+Element项目中的table，没有开放的上移下移的api,但是能对数据操作，故思路为数组中的一条数据，再重新添加一条数据，办法有点笨，但是好歹也是实现了，望有好的办法的，请留言

<el-table
              :data="tableData"
              style="width: 100%"

      >
        <el-table-column
                prop="date"
                label="日期"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                :formatter="formatter">
        </el-table-column>
        <el-table-column label="操作"   >
          <template slot-scope="scope">
            <el-button
                    size="mini"
                    @click="handleUp(scope.$index, scope.row)"
            >上移</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="handleDown(scope.$index, scope.row)">下移</el-button>
            <el-button
                    size="mini"
                    type="danger"
                    @click="deleteDown(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

　　js

data () {
      return {
        ‘tableData‘: [{
          date: ‘2016-05-02‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 1 弄‘,
          id:‘1‘
        }, {
          date: ‘2016-05-04‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 2 弄‘,
          id:‘2‘
        }, {
          date: ‘2016-05-01‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 3 弄‘,
          id:‘3‘
        }, {
          date: ‘2016-05-03‘,
          name: ‘王小虎‘,
          address: ‘上海市普陀区金沙江路 4 弄‘,
          id:‘4‘
        }],
        ‘obj‘:{
          ‘x‘:1,
          ‘y‘:2
        }
      }
    },
    methods:{
      formatter(row, column) {
        //console.log(‘地址格式化‘,row,column);
        return row.address;
      },
      handleUp(index,row) {
        console.log(‘上移‘,index,row);
        console.log(this.tableData[index]);
        if (index > 0) {

            let upDate = this.tableData[index - 1]
            this.tableData.splice(index - 1, 1);
            this.tableData.splice(index,0, upDate);
        } else {
          alert(‘已经是第一条，不可上移‘);
        }
      },
      deleteDown(index,row){
        console.log(‘删除‘,index,row);
        this.tableData.splice(index, 1);
      },
      handleDown(index,row){
        console.log(‘下移‘,index,row);
        if ((index + 1) === this.tableData.length){
          alert(‘已经是最后一条，不可下移‘);
        } else {
          console.log(index);
          let downDate = this.tableData[index + 1]
          this.tableData.splice(index + 1, 1);
          this.tableData.splice(index,0, downDate);
        }
      }
    }