table数据刷新;v-if刷新el-table表格

使用 v-if 和 ref 刷新表格内容

table数据刷新;v-if刷新el-table表格_第1张图片

    carNameChange(row,index) {
      row.need_driver = '是'
      let arr = this.carList.filter(val => val.id == row.car_id)
      let item = null
      if(arr && arr.length) item = arr[0]
      if(item) {
        row = {...row,...item}
        row.car_names = item.select_name
        this.carTableData[index] = row
        // 赋值完成后刷新表格
        this.refresh = false
        this.$nextTick(() => this.refresh = true)
      }
    },
.boxTable(style="margin-left: 20px;" v-if="refresh")
        el-table(:data="carTableData" size="small" border style="width: 100%;")
          el-table-column(prop="car_id" label="车辆选择" align="center")
            template(slot-scope="scope")
              el-select(
                v-model="scope.row.car_id"
                size="small"
                @change="carNameChange(scope.row,scope.$index)"
                placeholder="请选择车辆选择"
              )
                el-option(
                  v-for="item in carList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id")
          el-table-column(prop="license_plate" label="车牌号码" align="center")
          el-table-column(prop="brand" label="品牌" align="center")
          el-table-column(prop="people_on_board" label="车载人数" align="center" width="100")
          el-table-column(prop="driver" label="驾驶员" align="center")
          el-table-column(prop="contact" label="联系方式" align="center")
          el-table-column(label="操作" align="center" width="80")
            template(slot-scope="scope")
              .operate
                span(@click="carTableData.splice(scope.$index, 1)") 删除

你可能感兴趣的:(困难与解决,vue.js,elementui,javascript)