element table组件使用过程的一些问题记录（刷新，排序，扩展）

UI给出的设计图是这样的

1 扩展

要求点击运单号，显示更多内容，

element里面给出的例子是有扩展符号的一列，点击来展示

这里我想了下，把这一列隐藏起来了

然后点击的时候用rowClick 这个事件来进行展开，这里也借鉴了下网上搜来的思路

vue代码见下

generateUUID() { //生成唯一编码
    var d = new Date().getTime();
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random()*16)%16 | 0;
        d = Math.floor(d/16);
        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
},
rowClick(row, event, column) {

    Array.prototype.remove = function (val) {
        let index = this.indexOf(val);
        if (index > -1) {
            this.splice(index, 1);
        }
    };

    if(column.label == '运单号'){ // 只有点击运单才展开
        Array.prototype.remove = function (val) {
            let index = this.indexOf(val);
            if (index > -1) {
                this.splice(index, 1);
            }
        };

        if (this.entexpands.indexOf(row.id) < 0) {
            this.entexpands= [];
            row.id = this.generateUUID();
            this.entexpands.push(row.id);
        } else {
            this.entexpands.remove(row.id);
        }
    }

},

css部分

.el-table__expand-icon{
  display: none;
}

html

<el-table
        class="spHeight"
        @sort-change="sortTable"
        :data="orderTableData"
        style="width: 100%"
        :cell-class-name="cellClassName"
        row-key="id"
        :expand-row-keys="entexpands"
        @row-click="rowClick"
        ref="multipleSelection">
  <el-table-column
          label="序号"
          type="index"
          >
  </el-table-column>

  <el-table-column
          sortable
          label="运单号"
          prop="waybillNo"
          width="100"
          class-name="highlight-blue">
  </el-table-column>

  <el-table-column type="expand" width="20">
    <template slot-scope="props">
      <el-form label-position="left" inline class="demo-table-expand">

        <div v-for="item in props.row.orderInfoDto.supServiceSubOrderDtoList">

          <el-form-item label="子单号:" class="expand-line-subOrder"  v-if="props.row.orderInfoDto.supServiceSubOrderDtoList.length != 1">
            <span>{{ item.subOrderNo }}</span>
          </el-form-item>
          <el-form-item label="重量（kg）:" class="expand-line-subOrder" >
            <span>{{ item.weight }}</span>
          </el-form-item>
          <el-form-item label="体积（cm^3）:" class="expand-line-subOrder" >
            <span>{{item | volume}}</span>
          </el-form-item>
        </div>


        <el-form-item label="发件人地址:" class="expand-line-Order">
          <span>{{props.row.orderInfoDto.fromAddress | address}} </span>
        </el-form-item>
        <el-form-item label="收件人地址:" class="expand-line-Order">
          <span>{{props.row.orderInfoDto.toAddress | address }}</span>
        </el-form-item>
      </el-form>
    </template>
  </el-table-column>
  <el-table-column
          sortable
          label="产品"
          prop="productName"
          width="250">
  </el-table-column>
  <el-table-column
          sortable
          label="总重（kg）"
          prop="weight">
  </el-table-column>
  <el-table-column
          sortable
          label="始发地"
          prop="shipperAddress">
  </el-table-column>
  <el-table-column
          sortable
          label="目的地"
          prop="consigneeAddress">
  </el-table-column>
  <el-table-column v-if="req.supOrderStatus == 102"
          label="下单时间"
          sortable
          prop="createTime">
  </el-table-column>
  <el-table-column v-if="req.supOrderStatus == 103"
                   label="入库时间"
                   sortable
                   prop="receGoodTime">
  </el-table-column>
  <el-table-column v-if="req.supOrderStatus == 104"
                   label="出库时间"
                   sortable
                   prop="outGoodTime">
  </el-table-column>
</el-table>

2 清空搜索

另外这是个Tab切换的表格，如果切换的时候，要刷新表格，之前的排序要清空，这里表上加上了ref="multipleSelection"

tab切换的时候执行 this.$refs.multipleSelection.clearSort();

element table组件使用过程的一些问题记录（刷新，排序，扩展）

相关推荐