vue表格以及删除操作

最新推荐文章于 2023-07-13 18:11:58 发布

demaxiydadao

最新推荐文章于 2023-07-13 18:11:58 发布

阅读量872

点赞数

分类专栏：原创自己有源码

本文链接：https://blog.csdn.net/Fuyonghui123/article/details/116601784

版权

原创同时被 3 个专栏收录

43 篇文章 0 订阅

订阅专栏

有源码

20 篇文章 0 订阅

订阅专栏

自己

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link rel="stylesheet" href="css/element.css">
    <script src="js/element.js"></script>
</head>
<body>
<div id ="app">
   <template>
       <el-table v-bind:data="tableData" style="width: 100%" max-height="1000">
           <el-table-column fixed prop="date" label="日期" width="150"></el-table-column>
           <el-table-column prop="name" label="姓名" width="120"></el-table-column>
           <el-table-column prop="province" label="省份" width="120"></el-table-column>
           <el-table-column prop="city" label="市区" width="120"></el-table-column>
           <el-table-column prop="address" label="地址" width="300"></el-table-column>
           <el-table-column prop="zip" label="邮编" width="120"></el-table-column>
           <el-table-column fixed="right" label="操作" width="120">
               <template slot-scope="scope">
                   <el-button
                           @click.native.prevent="deleteRow(tableData,scope.$index)">
                       移除
                   </el-button>
               </template>
           </el-table-column>
       </el-table>
   </template>
</div>
<script>
  new Vue({
      el:"#app",
      data:{
          tableData: [{
              date: '2016-05-03',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
          }, {
              date: '2016-05-02',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
          }, {
              date: '2016-05-04',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
          }, {
              date: '2016-05-01',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
          }, {
              date: '2016-05-08',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
          }, {
              date: '2016-05-06',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
          }, {
              date: '2016-05-07',
              name: '王小虎',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
          }]
      },
    methods:{
          <!--splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。-->
      deleteRow(rows,index){
          rows.splice(index, 1);
      }
    }
  })
</script>
</body>
</html>

demaxiydadao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue表格以及删除操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <link rel="stylesheet" href="css/el.
复制链接

扫一扫