工作遇到的问题——各种表格篇

56 阅读1分钟

1.多选表格

<el-link type="primary" @click="toSelectGoods">选择商品</el-link>

<el-dialog
      v-el-drag-dialog
      class="dialog-box1"
      title="选择商品"
      width="1000px"
      :visible.sync="isGoodsDialog"
      :close-on-click-modal="false"
      @close="cancelBtn"
    >
      <div class="">
        <el-table
           ref="multipleTable"
          :data="goodsList"
          :header-cell-style="{ background: '#eceef4' }"
          @selection-change="handleSelectionChange"
          :row-key="getRowKeys"
        >
        <el-table-column
          type="selection"
          :reserve-selection="true"
          width="55">
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" />
          <el-table-column prop="statusFlagText" label="销售状态" />
        </el-table>
      </div>
      <Pagination
        :current-page="pageNumber"
        :total="totals"
        @sizeChange="handleSize"
        @currentChange="handleCurrent"
      />
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancelBtn">取 消</el-button>
    <el-button type="primary" @click="selectGoodsBtn">确 定</el-button>
  </span>
    </el-dialog>
    
    
    //方法
    toSelectGoods() {
      this.isGoodsDialog = true;
      this.getGoods();
      this.handleSelection = [];
      this.$nextTick((e) => {
  //回显表格选中的项,注意要拿到一行的id,才能匹配回显成功
        this.form.goodsStockDtos.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      });
    },
    getRowKeys(row) {
      return row.id
    },
     handleSelectionChange(row) {
     //组件自带的方法,能拿到选中的行的数组形成一个数组
      this.handleSelection = [];
      this.handleSelection = row || [];
      },
      selectGoodsBtn(row) {
       this.handleSelection.forEach((item) => {
         console.log('item=====',item)
        this.form.goodsStockDtos.push({
          goodsId: item.goodsId,
          id : item.id,
          goodsName: item.goodsName,
          specGroup : item.specGroup,
          goodsNo: item.goodsNo,
          goodsStockSkuReqs : item.goodsSkus
        });
      });
      //数组去重的万能公式
      let obj = {};
      this.form.goodsStockDtos = this.form.goodsStockDtos.reduce(function (
        item,
        next
      ) {
        obj[next.id] ? "" : (obj[next.id] = true && item.push(next));
        return item;
      },
      []);
       this.cancelBtn()
    },
     cancelBtn() {
      this.isGoodsDialog = false
      this.handleSelection = []
      //清空选中项
      this.$refs.multipleTable.clearSelection();
      //恢复每次打开弹框显示的是列表的第一页
      this.pageNumber = 1;
    },

实现效果:

image.png

2.表格里面嵌套表格

image.png 后端返回的数据结构如图

image.png 具体代码如下

<el-table
            v-if="dialogType === 1"
            :data="addForm.goodsDTOS"
            border
            stripe
            :header-cell-style="{ background: '#eceef4' }"
            style="width: 600px"
          >
            <el-table-column type="expand">
            // scopec这都是自定义名字的,这里是父插槽
              <template slot-scope="scopec">
                <el-table border :data="scopec.row.goodsStockDTOS">
                  <el-table-column
                    label="秒杀价格"
                    :prop="'goodsStockDTOS.' + scopec.$index + '.goodsActivityPrice'"
                    :rules="[
                      {
                        required: true,
                        message: '请输入秒杀价格',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.goodsActivityPrice"
                        style="width: 80px"
                      />
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="subSpecValues"
                    label="规格"
                    align="center"
                    width="50"
                  />
                  <el-table-column
                    prop="qualifiedNum"
                    label="库存数量"
                    align="center"
                    width="50"
                  />
                  <el-table-column
                    label="合格数量"
                    align="center"
                    width="130"
                    :prop="'goodsStockDTOS.' + scopec.$index + '.activityNum'"
                    :rules="[
                      {
                        required: true,
                        message: '请输入活动数量',
                        trigger: 'blur',
                      },
                    ]"
                  >
                    <template slot-scope="scope">
                      <el-input
                        v-model="scope.row.activityNum"
                        style="width: 80px"
                      />
                    </template>
                  </el-table-column>

                  <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                      <el-link
                        type="primary"
                        :underline="false"
                        style="margin-left: 10px"
                        @click="
                          firstDetele(scopec.$index, scope.$index, scope.row)
                        "
                      >删除</el-link>
                    </template>
                  </el-table-column>
                </el-table>
              </template>
            </el-table-column>
            <el-table-column prop="goodsName" label="商品名称" />
            <el-table-column prop="warehouseId" label="仓库">
              <template slot-scope="scope">
                <el-select v-model="scope.row.warehouseId" placeholder="请选择">
                  <el-option
                    v-for="item in optionsList"
                    :key="item.id"
                    :label="item.warehouseName"
                    :value="item.id"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <i class="el-icon-delete" @click="delGoods(scope.$index)" />
              </template>
            </el-table-column>
          </el-table>
          
     firstDetele(parIndex, childIndex, row) {
      this.addForm.goodsDTOS[parIndex].goodsStockDTOS.splice(childIndex, 1)
    },
    
    delGoods(index) {
      // this.multipleSelection.splice(index, 1);
      this.addForm.goodsDTOS.splice(index, 1)
      this.addForm.activityGoodsReqs.splice(index, 1)
    },
          
          

3.表格合并单元格

要求效果如如图:

image.png

后端给的数据如图:

image.png

具体实现代码:

<div class="table-box">
      <el-table
        :data="tableData"
        :span-method="objectSpanMethod"
        :header-cell-style="{ background: '#eceef4' }"
      >
        <el-table-column prop="goodsName" label="商品名称" />
        <el-table-column prop="goodsNo" label="商品编码" />
        <el-table-column prop="warehouseName" label="仓库" />
        <el-table-column prop="subSpecValues" label="规格" />
        <el-table-column prop="qualifiedNum" label="合格数量" />
        <el-table-column prop="unqualifiedNum" label="残损数量" />
        <el-table-column prop="wreckNum" label="折损数量" />
        <el-table-column prop="test" label="未发货数量" />
        <el-table-column prop="activitySum" label="活动库存" />
        <el-table-column label="操作" fixed="right" width="100px">
          <template slot-scope="spoce">
            <el-button
              size="mini"
              type="primary"
              plain
              @click="NavtostockData(spoce.row.goodsNo)"
            >查看流水</el-button>
          </template>
        </el-table-column>
      </el-table>



//1.接受到后端返回的值后开始数据处理
getList() {
      getStockList(
        Object.assign(this.selectForm, {
          pageNum: this.pageNum,
          pageSize: this.pageSize
        })
      ).then((res) => {
        const arr = []
        this.tableData = res.data.content
        this.tableData.forEach(e => {
          e.goodsStockSkuDTOS.forEach(item => {
            arr.push({
              goodsNo: e.goodsNo,
              goodsName: e.goodsName,
              goodsId: e.goodsId,
              warehouseName: e.warehouseName,
              warehouseId: e.warehouseId,
              activitySum: e.activitySum,
              goodsStockSkuDTOS: e.goodsStockSkuDTOS,
              unqualifiedNum: item.unqualifiedNum,
              subSpecValues: item.subSpecValues,
              qualifiedNum: item.qualifiedNum,
              wreckNum: item.wreckNum
            })
          })
        })
        this.tableData = arr.map(item => { return item })
        this.getSpanArr(this.tableData)
        this.total = res.data.totalElements
        
        // 合并行
    getSpanArr(data) {
      this.spanArr = []
      // data就是我们从后台拿到的数据
      for (let i = 0; i < data.length; i++) {
        if (i === 0) {
          this.spanArr.push(1)
          this.pos = 0
        } else {
          // 判断当前元素与上一个元素是否相同
          if (data[i].goodsId === data[i - 1].goodsId) {
            this.spanArr[this.pos] += 1
            this.spanArr.push(0)
          } else {
            this.spanArr.push(1)
            this.pos = i
          }
        }
        console.log(this.spanArr)
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      console.log('columnIndex==================', columnIndex)
      if (columnIndex === 0 || columnIndex === 1 || columnIndex === 8 || columnIndex === 9) {
        const _row = this.spanArr[rowIndex]
        const _col = _row > 0 ? 1 : 0
        console.log(`rowspan:${_row} colspan:${_col}`)
        return {
          // [0,0] 表示这一行不显示, [2,1]表示行的合并数
          rowspan: _row,
          colspan: _col
        }
      }
    },

4.拖拽表格

import Sortable from 'sortablejs'

mounted() {
    this.$nextTick(() => {
      this.rowDrop()// 行拖拽
    })
  },
  
   // 表格拖拽 行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          if (newIndex == oldIndex) return
          _this.selList.splice(
            newIndex,
            0,
            _this.selList.splice(oldIndex, 1)[0]
          )
          var newArray = _this.selList.slice(0)
          _this.selList = []
          _this.$nextTick(function() {
            _this.selList = newArray
            // let ids = _this.selList.map(e => {
            //   return { id: e.id || null }
            // })
            // ids = ids.filter(e => e.id !== null)
            // console.log(ids)
            // goodsSort({ ids }).then(res => {
            // this.$message.success('拖拽排序成功!')
            // this.getList()
            // })
          })
        }
      })
    },

5.表格定位

elementUI中的el-table 实现自动滚动到指定行,同时修改高亮颜色功能——技能提升

blog.csdn.net/yehaocheng5…

6.合并多列 blog.csdn.net/achabuhecha…