VUE + ES6 + ELEMENT UI 学习（二）

VUE + ES6 + ELEMENT UI 学习（二）

继续编辑昨天的页面。页面已经可以显示列表数据了，今天动态修改一下这个列表，并增加分页效果。

先写一个弹出框，Element UI中有两种弹窗，MessageBox弹框和Dialog对话框，仔细对比一下，最终呈现效果差不多，但是Dialog更好用一点，那就用Dialog吧。在现有内容下面写上Dialog元素：

<el-dialog :title="dialogTitle" :visible.sync="dialogEdit" width="1.4rem">
        <el-form :model="edit">
          <el-form-item label="名称:">
            <el-input v-model="edit.name" class="search" placeholder="请输入食物名称" clearable></el-input>
          </el-form-item>
          <el-form-item label="产地:">
            <el-select v-model="edit.city" class="search" placeholder="请选择" clearable>
              <el-option v-for="item in cities" :key="item.value" :value="item.value" :label="item.label"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="生产日期:">
            <el-date-picker v-model="edit.date" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEdit = false">取 消</el-button>
          <el-button type="primary" @click="dialogSubmit">确 定</el-button>
        </div>
      </el-dialog>

其中title是弹窗的标题，visible决定弹窗是否显示，值为true就显示，反之就隐藏。这样新增和修改可以使用同一个弹窗了，在不同地方弹出，显示不同的title、提交方法中根据title切换不同方法就OK。这里要注意两个地方：一个是visible后面的.sync，这个修饰符是表明这个属性在父页面打开这个页面时也要进行监听。第二个是中的:key属性。一开始没有写这个，一直报错，后来经过百度才明白，如果标签用到了循环，则必须使用:key属性对值声明以后才可以使用v-bing进行绑定。完成后弹出如下窗口：

本来按照以前的习惯，准备获取dom来着，又一想，VUE好像是不用选择器的啊。要摒弃这个坏习惯，添加了按钮点击事件以后，在方法里面直接修改数据列表：

addList() { //点击新增按钮
      this.dialogTitle = '新增' //弹窗标题
      this.dialogEdit = true   //显示弹窗
    },
    editRow(index) { //点击修改按钮，index是数据id
      this.dialogTitle = '修改'
      this.dialogEdit = true
      this.edit = this.foodList[index] //获取第n个数据，只要代替了这个数据就算是修改了
      this.edit.index = index
    },
    dialogSubmit() {
      if (this.dialogTitle === '修改') {
        this.foodList[this.edit.index] = this.edit
      } else { //直接新增一条数据，直接就可以显示在前端页面上
        let len = this.foodList.length + 1
        if (len < 10) {
          len = '0' + len
        }
        this.edit.num = '0000' + len
        const NEWFOOD = {}
        for (const key in this.edit) {
          NEWFOOD[key] = this.edit[key]
        }
        this.foodList.push(NEWFOOD)
      }
      this.dialogEdit = false
    },
    deleteR(index) { //删除也是同理
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => { //注意这里，这里最好用箭头简写，因为简写方法中，this是指向写出方法的位置，
      		//即window中。用this可以直接获取data中的数据。如果用function，那么this会根据调用方
      		//法的位置不同，指向不同的位置，就不能保证用this获取到data数据，那么就必须在方法上先获
      		//取this才可以。
        this.foodList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }

VUE真是太方便了，js和html分离，写html时候只需要关注数据放在哪里就好了，至于数据怎么改变，那是js的问题。而且数据改变就可以同步到html显示出来，相比jQuery每次改变都需要先获取dom然后修改dom强太多了，而且后期维护起来的也方便太多了。