el-table Vue JS中的动态行

如何解决el-table Vue JS中的动态行

我正在学习 Vue JS。我正在使用 el-table 显示我的数据如下：

el-table data

基本上，我正在为按钮的单击事件创建一个函数，该函数包含使用代码中表中行的属性 (scope.row.id) 的参数：

<el-table-column align="center" prop="id" label="Chức năng" width="150">
    <template slot-scope="scope">
      <el-button
        type="primary"
        icon="el-icon-switch-button"
        @click="searchImportForm(scope.row.id)"
      ></el-button>
    </template>
</el-table-column>

通常它工作正常。但是，我最近在表格中添加了一个新功能，即“搜索”功能。有一个新的文本框供用户输入关键字，表格返回包含该关键字的所有信息。

现在，当我按下按钮时，该功能不再起作用。我的问题是错误告诉“无法读取未定义的属性“id””。

有没有人像这样处理动态数据表？？

更新：这是我的问题的完整代码

<template>
  <div class="app-container">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <div class="importListHeader">
      <!-- <button @click="getImportData">Lấy dữ liệu</button> -->

      <div class="importList-header-Box-BoxID">
        <div>Mã thùng</div>
        <el-input v-model="searchByUser.BoxID" placeholder="Nhập mã" class="importListBoxID" />
      </div>

      <div class="importList-header-Box-productList">
        <div>Tên SP</div>
        <div class="importListMultiselect">
          <multiselect
            placeholder="Chọn sản phẩm"
            v-model="searchByUser.productName"
            :options="productOptions"
            label="name"
          ></multiselect>
        </div>
      </div>

      <div class="importList-header-Box-supplier">
        <div>Tên xưởng</div>
        <el-input v-model="searchByUser.keyword" placeholder="Nhập tên xưởng" class="importListsupplier" />
      </div>

      <div class="importList-header-Box-fromDate">
        <div>Từ ngày</div>
        <el-input
          id="importListFromDate"
          v-model="searchByUser.firstDate"
          placeholder="dd/mm/yyyy"
          class="inputBox"
        />
      </div>

      <div class="importList-header-Box-toDate">
        <div>Đến ngày</div>
        <el-input
          id="importListToDate"
          v-model="searchByUser.lastDate"
          placeholder="dd/mm/yyyy"
          class="inputBox"
        />
      </div>

      <div class="importList-header-Box">
        <el-button
          class="buttonImportList"
          type="success"
          @click="submitSearchImportInfo"
          icon="el-icon-search"
        ></el-button>
      </div>
    </div>

    <el-table ref="singleTable" :data="filteredLists" border fit highlight-current-row>
      <el-table-column align="center" label="#" width="55" prop="id"></el-table-column>

      <el-table-column align="center" label="Xưởng SX" width="200" prop="supplier"></el-table-column>

      <el-table-column align="center" label="Ngày nhập kho" width="150" prop="date"></el-table-column>

      <el-table-column align="center" label="Trạng thái" width="150">
        <template slot-scope="scope">
          <h3
            v-if="scope.row.status == 'Chưa hoàn thành' "
            style="background-color: #e8e8e8;  border-radius: 8px; font-size: 14px"
          >{{ scope.row.status }}</h3>

          <h3
            v-if="scope.row.status == 'Hoàn thành' "
            style="background-color: #67c23a;  border-radius: 8px; font-size: 14px"
          >{{ scope.row.status }}</h3>
        </template>
      </el-table-column>

      <!--
      <el-table-column class-name="status-col" label="Status" width="110" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status | statusFilter">{{ scope.row.status }}</el-tag>
        </template>
 
      </el-table-column>
      -->
      <el-table-column align="center" prop="id" label="Chức năng" width="150">
        <template slot-scope="scope">
          <el-button
            type="primary"
            icon="el-icon-switch-button"
            @click="searchImportForm(scope.row.id)"
          ></el-button>
        </template>
      </el-table-column>

      <el-table-column align="center" label="Người tạo phiếu" width="180">
        <template slot-scope="scope">
          <el-tag id="importListCreate">{{ scope.row.create_user }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="Người thực hiện" width="180">\
        <template slot-scope="scope">
          <el-tag id="importListConfirm">{{ scope.row.confirm_user }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" label="Ghi chú" prop="description"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'
import Multiselect from 'vue-multiselect'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',draft: 'gray',deleted: 'danger'
      }
      return statusMap[status]
    }
  },data() {
    return {
      searchByUser: {
        keyword: '',firstDate: '',lastDate: '',BoxID: '',productName: ''
      },lists: [
        // {
        //   id: '',//   supplier: '',//   date: '',//   status: ''
        // }
      ],productOptions: [{}],startDate: '00-00-0000',endDate: '31-12-3000'
    }
  },beforeRouteEnter(to,from,next) {
    axios
      .post('http://192.168.1.93:3000/displayAllInPaper')
      // axios.post('http://192.168.1.93:3000/displayAllInPaper')
      .then(res => {
        console.log(res)
        next(vm => {
          for (var i = 0; i < res.data.length; i++) {
            vm.lists.push({
              id: res.data[i].id,supplier: res.data[i].supplier,date: res.data[i].created_at,status:
                res.data[i].cur_status == 'p'
                  ? 'Chưa hoàn thành'
                  : 'Hoàn thành',description: res.data[i].paper_desc,create_user: res.data[i].create_user,confirm_user: res.data[i].confirm_user
            })
          }

          axios.post('http://192.168.1.93:3000/getProductType').then(res => {
            console.log(res)
            for (var i = 0; i < res.data.length; i++) {
              vm.productOptions.push({
                name: res.data[i].cur_name
              })
            }
          })
        })
      })
  },methods: {
    submitSearchImportInfo() {
      axios
        .post('http://192.168.1.93:3000/searchInPaperWithProduct',{
          productID: this.searchByUser.BoxID,productName: this.searchByUser.productName
        })
        .then(res => {
          console.log(res)
          this.lists.splice(0,this.lists.length)
          for (var i = 0; i < res.data.length; i++) {
            this.lists.push({
              id: res.data[i].id,status:
                res.data[i].cur_status == 'p' ? 'Chưa hoàn thành' : 'Hoàn thành'
            })
          }
        })
    },setCurrentRow(row) {
      this.$refs.singleTable.setCurrentRow(row)
    },searchImportForm(id_par) {
      this.$store.state.products.splice(0,this.$store.state.products.length)
      this.$store.state.inPaperID = this.filteredLists[id_par - 1].id
      axios
        .post(
          'http://192.168.1.93:3000/getDetailInPaper',this.filteredLists[id_par - 1]
        )
        .then(res => {
          console.log(res)
          for (var i = 0; i < res.data.length; i++) {
            this.$store.state.products.push({
              productID: res.data[i].id,cur_name: res.data[i].cur_name,perBox: res.data[i].perBox,Box_amount: res.data[i].Box_amount,scan_number: res.data[i].scan_number
            })
          }
        })
      this.$router.push({ path: '/import/details' })
    },filteredByName(lists) {
      return lists.filter(list =>
        list.supplier.match(this.searchByUser.keyword)
      )
    },localizeDate(date) {
      if (!date || !date.includes('/')) return date
      const [dd,mm,yyyy] = date.split('/')
      return (date = `${yyyy}-${mm}-${dd}`)
    },convertDate(date) {
      const [yyyy,dd] = date.split('-')
      var newDate = `${yyyy}${mm}${dd}`
      var newDate2 = parseInt(newDate)
      return (date = newDate2)
    },filteredByDaterange(lists) {
      if (this.searchByUser.firstDate != '') {
        this.startDate = this.searchByUser.firstDate
      }
      if (this.searchByUser.lastDate != '') {
        this.endDate = this.searchByUser.lastDate
      }
      return lists.filter(list =>
        this.convertDate(list.date) >=
          this.convertDate(this.localizeDate(this.startDate)) &&
        this.convertDate(list.date) <=
          this.convertDate(this.localizeDate(this.endDate))
          ? list
          : ''
      )
    }
  },computed: {
    filteredLists: function() {
      // return this.filteredByDaterange(this.lists)
      if (
        this.searchByUser.keyword == '' &&
        this.searchByUser.firstDate == '' &&
        this.searchByUser.lastDate == ''
      ) {
        return this.filteredByName(this.lists)
      }

      if (
        this.searchByUser.keyword != '' &&
        this.searchByUser.firstDate == '' &&
        this.searchByUser.lastDate == ''
      ) {
        return this.filteredByName(this.lists)
      }

      if (
        this.searchByUser.keyword == '' &&
        (this.searchByUser.firstDate != '' || this.searchByUser.lastDate != '')
      ) {
        return this.filteredByDaterange(this.lists)
      }

      if (
        this.searchByUser.keyword != '' &&
        (this.searchByUser.firstDate != '' || this.searchByUser.lastDate != '')
      ) {
        return this.filteredByDaterange(this.filteredByName(this.lists))
      }
    }
  },components: {
    Multiselect
  }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style>
.importListHeader {
  max-width: 96%;
  display: flex;
  text-align: left;
  justify-content: space-between;
}


.inputBox {
  width: 250px;
  height: 100px;
}
.el-dropdown-menu {
  overflow-y: scroll;
}
.el-dropdown-link {
  cursor: pointer;
  color: #ffffff;
}

.importListMultiselect .multiselect__tags {
  min-height: 40px;
  display: block;
  padding: 8px 40px 0 8px;
  border-radius: 5px;
  border: 0.5px solid #e8e8e8;
  background: #fff;
  font-size: 14px;
  width: 320px;
}

.importListMultiselect .multiselect {
  -webkit-Box-sizing: content-Box;
  Box-sizing: content-Box;
  display: block;
  position: relative;
  width: 320px;
  min-height: 40px;
  text-align: left;
  color: #35495e;
}

#importListFromDate {
  width: 200px;
}

#importListToDate {
  width: 200px;
}

.buttonImportList {
  position: absolute;
  top: 39px;
}
.el-icon-arrow-down {
  font-size: 8px;
}
.el-dropdown {
  vertical-align: top;
}

.importListBoxID {
  max-width: 210px;
}

.importList-header-Box-BoxID {
  max-width: 200px;
}

.importList-header-Box-productList {
  max-width: 320px;
}

.importList-header-Box-supplier {
  max-width: 250px;
}

.importList-header-Box-fromDate {
  max-width: 200px;
}

.importList-header-Box-toDate {
  max-width: 200px;
}

#importListCreate {
  font-size: 15px;
}

#importListConfirm {
  font-size: 15px;
  color: #35495e;
  background-color: transparent;
  border-style: none;
}
</style>