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

美丽先生

已于 2022-12-27 11:37:57 修改

阅读量3.2k

点赞数

分类专栏：困难与解决文章标签： vue.js elementui javascript

于 2022-11-03 16:45:55 首次发布

本文链接：https://blog.csdn.net/qq_43780814/article/details/127673461

版权

困难与解决专栏收录该内容

78 篇文章 2 订阅

订阅专栏

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

在这里插入图片描述

    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)") 删除