vue-element-admin小集（一）技，能get！

lxx_y
1,489 阅读4分钟

学到知识最好的办法就是强制输出吧，多动手，嗯~告诫自己！

1.过滤器的使用

  • 使用场景
    对某部分内容进行统一的处理，例如对表格中的某列进行后台状态而要显示不同的样式等
  • 使用代码
// html部分
<el-table
  :data="tableData"
  style="width: 100%">
  <el-table-column
    prop="date"
    label="日期"
    width="180">
  </el-table-column>
  <el-table-column
    label="姓名"
    width="180">
    <template slot-scope="{ row }">
      <el-tag :type="row.name.gender | genderTag">{{row.name.tempName}}</el-tag>
    </template>
  </el-table-column>
  <el-table-column
    label="地址">
    <template slot-scope="{ row }">
      {{ row.address.temp | tempAddress}}
    </template>
  </el-table-column>
    </el-table>
    
// js部分(和data同级)
filters: {
  tempAddress (str) {
    return str.substring(0, 10)
    },
  genderTag (gender) {
    let obj = {
      boy: 'warning',
      girl: 'success',
     }
    return obj[gender]
  }
},
 data () {
    return {
       tableData: [{
        date: '2016-05-02',
        name: {
          gender: 'boy',
          tempName: '小张'
        },
        address: {
          temp: '我是个地址呀我只是个临时地址啊'
        }
      }, {
        date: '2016-05-04',
        name: {
          gender: 'girl',
          tempName: '小李'
        },
        address: {
          temp: '我是个地址呀我只是个临时地址啊'
        }
      }, {
        date: '2016-05-01',
        name: {
          gender: 'boy',
          tempName: '小王'
        },
        address: {
          temp: '我是个地址呀我只是个临时地址啊'
        }
      }, {
        date: '2016-05-01',
        name: {
          gender: 'girl',
          tempName: '小李'
        },
        address: {
          temp: '我是个地址呀我只是个临时地址啊'
        }
      }]
    }
  },

2.删除最后一页操作分页bug问题

问题说明：当删除最后一页内容的时候，通常是删除内容了，页码也变了，也重新加载列表了，但是此时去重新请求的页码page还是之前的页码，这就还需要对页码做操作，如果是最后一页的话就把page得到应该的page，然后去请求，情况是只有最后一页删除的时候去考虑，因为在其他页做操作的话下面的内容会顶上来。

  • what? 页码变了但是内容没有跟上来，还停留在之前删除的那一页。
  • why? 因为只是删除后重新去加载列表了，此时去请求的页码page还是之前的，因为已经删除完了，所以请求后的result = []
  • how? 让页码回到对应的页码，那么此时的页码是什么呢？Math.ceil(总页码数 / 每页的数量),如果此时的page > ？Math.ceil(总页码数 / 每页的数量),那么就对page进行赋值。 实现代码:
handleDelete (scope) {
 // 判断是否是最后一页，是的话才对page进行操作，否则无
 var pageCount = Math.ceil(this.total / this.pageSize)
 if(this.page > pageCount) {
    this.page = pageCount
 }
 // 用新的page去发送请求
 this.loadArticles(this.page)
}

效果图：

问题图
修改图

3.编辑业务功能开发

通常见的编辑操作：

  • 实现效果
    用户点击编辑之后，弹出弹框，显示此时表格这一行的内容，当用户编辑完成之后,关闭弹框的时候，表格中的这一行数据要改变。
  • 实现思路
    当用户点击edit之后要做的事情？
  1. 打开弹框，将此时父组件弹框打开的变量传递给子组件
  2. 将此时表格中这一行的数据传递给子组件，因为传递的是个对象，之前会直接进行赋值传递，不建议这种做法，会破坏vue的单项数据流，使用Object.assign进行拷贝。然后传递
  3. 子组件接收到值之后进行展示，用户进行编辑内容，点击确定之后将此时的内容传递给父组件，这样父组件才会显示用户编辑之后的内容，对表格中的数据进行替换。
  • 实现代码
// 父组件内容
 <el-table-column
    label="操作"
    width="150">
    <template slot-scope="scope">
      <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope)" ></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </template>
</el-table-column>
// 弹出框
<dia-log :isShow.sync="isShow" :row="row" @editTrue = "handleEditSuccess"></dia-log>

methods: {
 handleEdit (value) {
    /*
    1.打开弹框 将控制弹窗的变量设置为true
    2.将这一行也就是参数传递过去给子组件
    3.子组件通过props来接收
    4.子组件将这个数据进行展示
    */
    this.isShow = true
    this.row = Object.assign({}, value.row)
    this.row['key'] = value.$index
 }
}

// 子组件内容
 <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="()=>{$emit('update:isShow', false)}"
      >
      <el-form ref="form" :model="row" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="row.name"></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="row.address">
          </el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose(0)">取 消</el-button>
        <el-button type="primary" @click="handleClose()">确 定</el-button>
      </span>
    </el-dialog>
    
<script>
    export default {
      props: {
        isShow: {
          type: Boolean,
          default: false
        },
        row: {
          type: Object,
          default: ()=> {}
        }
      },
      data () {
        return {
        }
      },
      computed: {
        dialogVisible () {
          return this.isShow
        }
      },
      methods: {
        handleClose (v) {
          if (v == 0) {
            return this.$emit('update:isShow', false)
          }
          // 1.发送编辑的请求
          // 2.发起relod事件
          this.$emit('update:isShow', false)
          this.$emit('editTrue', this.row)
        }
      }
    }
</script>

4.行内编辑效果

实现需求：在表格中某行中点击编辑按钮，之后进行行内编辑，修改数据。
实现效果：

实现思路：

  1. 在对表格数据初始化的时候通过$set来为表格数据分组设置一个isInlineEdit的属性，默认是false。
  2. 在表格一列中运用v-if和v-else来设置input框和span进行编辑与非编辑的替换。
  3. v-if的条件就是绑定的每一行数据的isInlineEdit属性。
  4. 当点击编辑的时候，通过传递参数row，直接修改row中的isInlineEdit属性为true，非编辑状态反之。 实现代码：
<template>
 <el-table-column label="操作" show-overflow-tooltip>
    <template slot-scope="scope">
      <el-button type="primary" @click="edit(scope.$index)">
        <i class="el-icon-edit"></i>
      </el-button>
      <el-button type="primary" @click="scope.row.editline = true">
        <i class="el-icon-zoom-in"></i>
      </el-button>
      <el-button type="primary" @click="scope.row.editline = false">
        <i class="el-icon-zoom-out"></i>
      </el-button>
    </template>
      </el-table-column>
</template>
<script>
 created() {
   this.tableData.map(item => {
     this.$set(item, "editline", false);
   });
 }
</script>
avatar
文章
阅读
粉丝