数据库字段

Id （主键 自增）
Name （nvchar 200）
Remark（nvchar 200）

视图

<div id="upp">
        <div>
            <label>编号</label>
            <input type="text" id="id" v-model="role.Id" />
        </div>

        <div>
            <label>名称</label>
            <input type="text" id="name" v-model="role.Name" />
        </div>
        
        <div>
            <label>备注</label>
            <input type="text" id="remark" v-model="role.Remark" />
        </div>

        <div>
            <input type="button" onclick="Get()" value="获取一个数据" />       

            <input type="button" onclick="Select()" value="查询" />
        </div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>名字</th>
                    <th>备注</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in items">
                    <td>{{ item.Id }}</td>           /*绑定数据*/
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Remark }}</td>
                </tr>
            </tbody>
        </table>
    </div>

@section scripts{
    <script type="text/javascript">
        var v = new Vue({        //创建一个vue示例
            el: "#upp",          //表示该vue实例挂载到 <div id="upp">...</div>
            data: {
                "role": { "Id": 1, "Name": "管理员", "Remark": "权利很大"},
                "items": [
                    { "Id": 1, "Name": "管理员", "Remark":"权利很大"}
                ]
            }
        })

        //添加
        function Add() {
            $.ajax({                                //定义一个AJax
                url: "/Role/Add",                   //链接地址
                type: "get",                        //传值方式
                dataType: "json",                   //值的格式
                data: v.role,                       //把值传递到控制器去
                success: function (r) {             //接收控制器传过来的值（r）
                    if (r.c == 0) {
                        $("#name").val("");
                        $("#remark").val("");
                    }
                }

            })

        }

        //获取一数据
        function Get() {

            var id = $("#id").val();
            $.ajax({
                url: "/Role/Get",
                type: "get",
                dataType: "json",
                data: { "id": id },
                success: function (r) {
                    v.role = r;             //把获去到的值 给model
                }

            })          
        }

        //查询
        function Select() {
            $.ajax({
                url: "/Role/Select",
                type: "get",
                dataType: "json",
                success: function (r) {
                    v.items = r;            //把获去到的值 给model
                }
            })           
        }

    </script>
    }

视图

RbacDBEntities db = new RbacDBEntities();
        // GET: Role
        public ActionResult Index()
        {
            return View();
        }

        //查询
        public ActionResult Select()
        {
            var role = db.Roles .ToList();
            return Json(role, JsonRequestBehavior.AllowGet);
        }
        //获取一条数据
        public ActionResult Get(int? id)
        {
            var role = db.Roles.Find(id);
            return Json(role, JsonRequestBehavior.AllowGet);
        }

        //添加
        public ActionResult Add(Role role)
        {
            var mes = "新增错误";
            var code = 1;
            db.Roles.Add(role);
            if (db.SaveChanges() > 0)
            {
                mes = "成功";
                    code = 0;
            }
            var res = new
            {
                m = mes,
                c = code

            };

            return Json(res, JsonRequestBehavior.AllowGet);

        }

vue 表格懒加载

elementui表格数据量大的时候页面会出现卡顿，可以分次获取后台数据，不然页面直接卡死。表格懒加载需要后台返回一个总的页数，前端监听滚动到底部的时候去调接口来获取数据，每调一次接口将总数+1,。也可以直接用其他的ui组件来处理。

 <el-table
      :key="tableKey"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%"
      :height="tableHeight"
      ref="editTable"
    >
      <el-table-column
        align="center"
        prop="index"
        label="序号"
        type="index"
      ></el-table-column>
      <el-table-column
        align="center"
        prop="name"
        label="name"
      ></el-table-column>
      <el-table-column
        prop="email"
        label="email"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="address"
        label="address"
        align="center"
      ></el-table-column>
    </el-table>

data() {
    return {   
      tableData: [],
      currentPage: 1,//当前加载的page
      pageSize: 20,//当前的limit
      totalPage: 8,//后台返回的总页数
    };
  },
 mounted() {  
    this.loadData();
    this.handleScroll()
  },
 methods: {
  //监听dom的scroll事件
    handleScroll() {
      let that = this;
      let dom = that.$refs.editTable.bodyWrapper;
      dom.addEventListener('scroll', function () {
        const scrollDistance = 
        dom.scrollHeight - dom.scrollTop - dom.clientHeight;
        if (scrollDistance <= 0) {         
          //等于0证明已经到底，可以请求接口
          if (that.currentPage < that.totalPage) {
            //当前页数小于总页数就请求
            that.currentPage++; //当前页数自增
            //请求接口的代码
            that.loadData();
          }
        }
      });
    },
    loadData() {
      //请求后台接口获取数据
      this.tableData = 后台接口返回的数据；
      this.tableData.map((v,i)=> {
        v.index = i+1;
      })      
    },
   

也可以在div上添加滚动事件

 <div class="artical" v-loading="isloading" ref="scrollbox">
     <el-scrollbar>
         <div
            v-for="(item, index) in tableData"
            :key="index"
            class="artical-main"
          >
              <div class="title">{{ item.jourHeadline }}</div>
              <div class="cerateTime">
                    创建人:{{
                      item.createUserName
                    }}&nbsp;&nbsp;&nbsp;发布时间:{{ item.jourTime }}
                  </div>
                  <div class="mainArt">{{ item.jourCentent }}</div>
                </div>
                <el-empty
                  :image-size="200"
                  v-if="tableData.length == 0"
                ></el-empty>
              </el-scrollbar>
            </div>

监听事件
  mounted() {
    document.addEventListener("scroll", this.handleScroll, true);
  },
  beforeDestroy() {
    document.removeEventListener("scroll", this.listenerFunction);
  },

 //监听滚动事件
    handleScroll() {
      if (this.dialogFormVisible) {
        if (this.$refs.scrollbox.scrollTop == 0) {
          if (this.total > this.tableData.length) {
            this.listQuery.pageSize = this.listQuery.pageSize + 10;
            this.getData();
          }
        }
      }
    },

因为这个是写在弹框里面的，没加if (this.dialogFormVisible)会报错，加了之后就没有再报错了。

rest(row) {
            let time = row.restTime
            if (time >= 0) {
                let t = time / 1000;
                const m = Math.floor(t / 60);
                const s = Math.floor(t - m * 60);
                if (m >= 0 && (m * 60 + s) < 90) {
                    row.urgentSign = true
                    timeoutPlay();
                    // isPlayed=true;
                } else {
                    row.urgentSign = false
                }
                let str = ((m + "").length === 1 ? "0" + m : m) + ":" + ((s + "").length === 1 ? "0" + s : s)
                return str
            } else {
                return "00:00";
            }

        },
        resetTicker() {
            if (this.tickler) {
                clearInterval(this.tickler);
            }

            this.ticker = setInterval(() => {
                for (let i = 0, len = this.tableData.length; i < len; i++) {
                    const item = this.tableData[i];
                    let expireTime = new Date(item.expireTime).getTime();

                    if (!this.timeDiff) {
                        let serveNow = item.curTime;
                        this.timeDiff = moment(serveNow).diff(moment());
                    }

                    item.restTime = moment(expireTime).diff(moment()) - this.timeDiff;
                    // console.log(item.restTime)
                }
            }, 1000);
        }

<el-table-column
                                    label="处理倒计时"
                            >
                                <template slot-scope="scope">
                                    <span style="color: red">{{rest(scope.row)}}</span>
                                </template>
                            </el-table-column>