VueJS Редактировать данные из таблицы на новой странице - PullRequest
Новая
       11

VueJS Редактировать данные из таблицы на новой странице

0 голосов
/ 27 февраля 2019

У меня есть 3 страницы 1 - Список всех данных в таблице 2 - Добавить страницу, на которой я могу добавлять данные (но сейчас я использую фиктивные данные внутри своего кода) 3 - Редактировать страницу, где предполагается, что она имеет тот же дизайн, что иДобавить страницу, так как я редактирую те же данные - я искал в течение недели, как, когда я нажимаю изменить, он посылает мне редактировать страницу с такими данными, как (имя и т. Д.) И вставлять их в форму редактирования страницы

ЭТО МОЙ КОД ДЛЯ СПИСКА ДАННЫХ 

<template>
  <el-table 
    :data="tableData"
    :default-sort = "{prop: 'CN', order: 'ascending'}"
    style="width: 100%">
    <el-table-column
      label="Class Name"
       prop="CN"
      sortable
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.CN }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="Class Minimum Visits"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.NCV }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="Class Maximum Visits"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.MCV }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="Difference Valid Days"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.DVD }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="Class Type"
      width="180">
      <template slot-scope="scope">
        <span style="margin-left: 10px">{{ scope.row.CT }}</span>
      </template>
    </el-table-column>


    <el-table-column
      label="Operations">
      <template slot-scope="scope">
        <el-button :plain="true"
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">Edit</el-button>


        <el-button :plain="true"
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)" >Delete</el-button>

      </template>
    </el-table-column>
  </el-table>

</template>

<script>
  export default {
    data() {
      return {
        visible2: false,
        tableData: [{
          CN: 'A+',
          // NCV:'2',
          MCV:'4',
          DVD: '-1',
          CT:'PM'

        }, {
         CN: 'A',
          NCV:'1',
          MCV:'3',
          DVD: '-1',
          CT:'AM'
        }, {
          CN: 'B',
          NCV:'4',
          MCV:'6',
          DVD: '-1',
          CT:'PH'
        }, {
          CN: 'C',
          NCV:'1',
          MCV:'3',
          DVD: '-1',
          CT:'PH'
        }]
      }
    },
    methods: {

      handleEdit(CN, row) {
    this.$router.push({name:'EditClass' ,params: {CN: this.CN}})
      },
      handleDelete(index, row) {
        this.$message({
          message: 'Class ' +' '+  row.CN +' '+' Deleted Successfully',
          type: 'success'
        });
        this.tableData.splice(row,1);
      },
      editClass(editClass) {
    this.$router.push({name:'EditClass'})
        }
    }
  }
</script>

на маршруте, который я передаю CN, вот так: 

path: '/EditClass/:CN',
            name: 'EditClass',
            component: EditClass,

на странице редактирования 

<template>
    <!-- Contact Section start -->
    <el-form ref="form" label-position="top" :model="ListClass" label-width="200px" class="editClass">
            <el-col>
                <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p" >
                    <el-form-item label="Edit Class">
                        <el-input  placeholder="Class Name" value="ListClass.CN"/>
                    </el-form-item>
                </el-col>
            </el-col>
            <el-col>
                <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
                    <el-form-item label="Minimum Calls Per Cycle">
                        <el-input  placeholder="MinCalls" type="number" value="ListClass.NCV"/>
                    </el-form-item>
                </el-col>
            </el-col>
            <el-col>
                <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
                    <el-form-item label="Maximum Calls Per Cycle">
                        <el-input  placeholder="MaxCalls" type="number" value="ListClass.MCV"/>
                    </el-form-item>
                </el-col>
            </el-col>
            <el-col>
                <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
                    <el-form-item label="Visit Valid Difference Days">
                        <el-input  placeholder="VisitValidDiffDays" type="number" value="ListClass.DVD"/>
                    </el-form-item>
                </el-col>
            </el-col>
            <el-col>
                <el-col :span="12" :md="12" :sm="24" :xs="24" class="col-p">
                    <el-form-item label="Type">
               <el-select style="width:100%" placeholder="Select Type">
                        <el-option>
                        </el-option>
                    </el-select>                
                </el-form-item>
                </el-col>

            </el-col>
                <el-col class="col-p">
                <el-form-item>
                    <button type="button" @click="onSubmit()">Edit</button>
                </el-form-item>
            </el-col>
                </el-form>


    <!-- Contact Section End -->
</template>
<script>
 export default{
  name:'EditClass',
  data(){
   return{
   }
  }

 }
</script>

Мой опыт работы с Vue слишком мал ...

1 Ответ

0 голосов
/ 27 февраля 2019

На мой взгляд, у вас есть три варианта:

  1. Как @lmarqs сказал, что вы можете использовать vuex , но это немного излишне, если это единственный вариант использования.
  2. Чтобы вы могли использовать Пользовательские события , как @ittus объяснил это здесь , он также связал этот урок .
  3. Или вы используетемаршрутизатор для создания URL-адреса типа yoururl.com/table/ELEMENT-ID, а затем вы захватываете этот идентификатор в компоненте и делаете новый запрос к вашему API (не очень хорошее решение)
...