Блог

Главная - Вопросы по программированию - Динамическая строка в el-таблице Vue JS

Динамическая строка в el-таблице Vue JS

#vue.js #vuejs2 #html-table #row #element-ui

Вопрос:

Я изучаю Vue JS. Я использую el-таблицу для отображения своих данных следующим образом:

данные el-таблицы

В принципе, я создаю функцию для события нажатия кнопки, которая содержит параметр, используя свойства строки в таблице (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>

Обычно это работает нормально. Однако недавно я добавил в таблицу новую функцию-функцию «поиск». Существует новое текстовое поле, в котором пользователь вводит ключевое слово, и таблица возвращает всю информацию, содержащую это ключевое слово.

Теперь, когда я нажимаю кнопку, функция больше не работает. И моя проблема в том, что ошибка говорит «Не удается прочитать идентификатор свойства «неопределенного».

Кто-нибудь знает, как обращаться с такой таблицей динамических данных ??

Обновление: Вот полный код моей проблемы

 <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,
              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'
            })
          }
        })
    },

    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, mm, 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)) amp;amp;
        this.convertDate(list.date) <=
          this.convertDate(this.localizeDate(this.endDate))
          ? list
          : ''
      )
    }
  },
  computed: {
    filteredLists: function() {
      // return this.filteredByDateRange(this.lists)
      if (
        this.searchByUser.keyword == '' amp;amp;
        this.searchByUser.firstDate == '' amp;amp;
        this.searchByUser.lastDate == ''
      ) {
        return this.filteredByName(this.lists)
      }

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

      if (
        this.searchByUser.keyword == '' amp;amp;
        (this.searchByUser.firstDate != '' || this.searchByUser.lastDate != '')
      ) {
        return this.filteredByDateRange(this.lists)
      }

      if (
        this.searchByUser.keyword != '' amp;amp;
        (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>

Комментарии:

1. Я думаю, что ошибка в этом методе — searchImportForm(scope.row.id). Вы можете добавить код этого метода и область данных.строка

2. Ну, я не думаю, что в этом проблема, но все же стоит попробовать. Я только что загрузил свой код в сообщение для вашей информации.

3. Вы уверены, что у вас есть ценность res.data[i] ? ( productID: res.data[i].id ). убедитесь, что ошибка не соответствует этой строке кода.

Метки: