• 完整的Vue+element-ui table组件实现表格内容的编辑删除和新行添加小实例


    copy 文档  https://www.cnblogs.com/CodeTheUniverse/p/13213088.html

    先上一张页面展示图,画面很简单(当然这个功能也很简单,不过笔者刚接触Vue,为了避免以后出现相同需求再重写,所以记录一下)

     老样子,直接贴代码,不多BB

    复制代码
    <template>
      <el-row style="height: 100%;100%" type="flex" justify="center">
        <el-col :span="24">
          <el-table
            :data="tableData"
            :stripe="true"
            height="100%"
            style=" 100%"
            :row-class-name="tableRowClassName">
            <el-table-column
              prop="date"
              label="客户 ID"
              width="auto"
              align="center"
              :resizable="false">
              <template slot-scope="scope">
                <el-input v-if=" isEdit == scope.$index " v-model="scope.row.date" placeholder="请输入内容" style="text-align: center;"></el-input>
                <span v-if=" isEdit != scope.$index ">{{ scope.row.date }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="地域别"
              width="auto"
              align="center"
              :resizable="false">
              <template slot-scope="scope">
                <el-input v-if=" isEdit == scope.$index " v-model="scope.row.name" placeholder="请输入内容" style="text-align: center;"></el-input>
                <span v-if=" isEdit != scope.$index ">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="auto"
              align="center"
              :resizable="false">
              <template slot-scope="scope">
                <el-button-group>
                  <el-button
                    v-if=" isEdit == scope.$index "
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row, 1)">保存</el-button>
                  <el-button
                    v-if=" isEdit != scope.$index "
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row, 0)">编辑</el-button>
                  <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </el-button-group>
              </template>
            </el-table-column>
            <el-button
              slot="append"
              style=" 100%;border-radius: 0;border-top: 0;border-left: 0;border-right: 0;"
              @click="appendNew">点击追加一行</el-button>
          </el-table>
        </el-col>
      </el-row>
    </template>
    
    <script>
      export default {
        data() {
          return {
            tableData: [{
              date: '2016-05-02',
              name: '王小虎'
            }, {
              date: '2016-05-04',
              name: '王小虎'
            }, {
              date: '2016-05-01',
              name: '王小虎'
            }, {
              date: '2016-05-03',
              name: '王小虎'
            }],
            isEdit: -99
          }
        },
        methods: {
          handleEdit(index, row, status) {
            switch (status) {
              case 0:
                this.isEdit = index;
                break;
              case 1:
                this.isEdit = -99;
                break;
            }
          },
          handleDelete(index, row) {
            this.$confirm('这将会永久删除该行数据,是否继续?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
              this.tableData.splice(index, 1);
              this.$message({
                type: 'success',
                message: '删除成功'
              });
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
          },
          appendNew(){
            this.tableData.push({
              date: '',
              name: ''
            });
            this.isEdit = this.tableData.length - 1
          },
          tableRowClassName({row, rowIndex}){
            row.index = rowIndex
          }
        }
      }
    </script>
    
    <style>
      html, body {
        height: 100%;
      }
    </style>
     
  • 相关阅读:
    Java中Date和Calender类的使用方法
    看《做性能测试需要做些什么》
    【笔记】jquery append,appendTo,prepend,prependTo 介绍
    【实践】jquery实现滑动动画及轮播
    【实践】四联联动 + 更加优化
    【实践】jQuery实现三联联动
    关于导入excel报错的处理(xls,xlsx)
    递归算法及经典案例
    验证身份证真假
    正则表达式
  • 原文地址:https://www.cnblogs.com/lilamisu/p/13924945.html
Copyright © 2020-2023  润新知