html+elementui实现表格内容的增删Demo

全部代码（复制到空的html即可查看效果）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- 引入elmentui样式 -->
  <link href="https://cdn.bootcss.com/element-ui/2.8.2/theme-chalk/index.css" rel="stylesheet">
  <!-- 引入elmentui js -->
  <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
  <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
</head>

<body>
  <div id="app">
    <div class="top">
      <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddDetails">添加</el-button>
      <el-button type="success" icon="el-icon-delete" size="mini" @click="handleDeleteDetails">删除</el-button>
      <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAllDetails">清空</el-button>
    </div>

    <el-table v-loading="loading" :data="bcglXiangXiList" :row-class-name="rowClassName"
      @selection-change="handleDetailSelectionChange" ref="tb">
      <el-table-column type="selection" width="30" align="center"></el-table-column>
      <el-table-column label="序号" align="center" prop="xh" width="50"></el-table-column>

      <el-table-column label="开始时间/最早时间-结束时间/最晚时间" prop="sjfw">
        <template slot-scope="scope">
          <el-time-picker is-range format="HH:mm" value-format="HH:mm" :style="{width: '100%'}" start-placeholder="开始时间"
            end-placeholder="结束时间" range-separator="至" clearable @change="changesjfw(scope.row)"
            v-model="bcglXiangXiList[scope.row.xh-1].sjfw"></el-time-picker>
        </template>
      </el-table-column>

      <el-table-column label="指定天数" align="center" prop="ts" width="150">
        <template slot-scope="scope">
          <el-select clearable @change="changezdts(scope.row)" v-model="bcglXiangXiList[scope.row.xh-1].ts">
            <el-option v-for="dict in zdtsOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="打卡地点" align="center" prop="dkdd">
        <template slot-scope="scope">
          <el-select clearable @change="changedkdd(scope.row)" v-model="bcglXiangXiList[scope.row.xh-1].dkdd">
            <el-option v-for="dict in dkddOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </template>
      </el-table-column>

      <el-table-column label="最小井下累计时间-最大井下累计时间" prop="jxsjfw">
        <template slot-scope="scope">
          <el-time-picker is-range format="HH:mm" value-format="HH:mm" :style="{width: '100%'}" start-placeholder="开始时间"
            end-placeholder="结束时间" range-separator="至" clearable @change="changejxsjfw(scope.row)"
            v-model="bcglXiangXiList[scope.row.xh-1].jxsjfw"></el-time-picker>
        </template>
      </el-table-column>
    </el-table>
  </div>
</body>

<script>
  let app = new Vue({
    el: '#app',
    data() {
      return {
        loading: false,
        //详细list
        bcglXiangXiList: [],
        //选中的从表数据
        checkedDetail: [],
        zdtsOptions: [{ dictValue: '1', dictLabel: 1 }, { dictValue: '2', dictLabel: 2 }, { dictValue: '3', dictLabel: 3 }],
        dkddOptions: [{ dictValue: '1', dictLabel: '北京' }, { dictValue: '2', dictLabel: '上海' }, { dictValue: '3', dictLabel: '广州' }]
      }
    },
    methods: {
      rowClassName({ row, rowIndex }) {
        row.xh = rowIndex + 1;
      },
      //单选框选中数据
      handleDetailSelectionChange(selection) {
        if (selection.length > 1) {
          this.$refs.tb.clearSelection();
          this.$refs.tb.toggleRowSelection(selection.pop());
        } else {
          this.checkedDetail = selection;
        }
      },
      handleAddDetails() {
        if (this.bcglXiangXiList == undefined) {
          this.bcglXiangXiList = new Array();
        }
        let obj = {};
        obj.ts = "1";
        obj.dkdd = "1";
        obj.sjfw = ["07:00", "07:30"];
        obj.jxsjfw = ["06:00", "12:00"];

        this.bcglXiangXiList.push(obj);
      },
      handleDeleteDetails() {
        if (this.checkedDetail.length == 0) {
          this.$alert("请先选择要删除的数据", "提示", {
            confirmButtonText: "确定",
          });
        } else {
          this.bcglXiangXiList.splice(this.checkedDetail[0].xh - 1, 1);
        }
      },
      handleDeleteAllDetails() {
        this.bcglXiangXiList = undefined;
      },
    }
  })

</script>
<style>
  .top {
    margin: 20px;
    text-align: center;
  }
</style>

</html>
posted @ 2021-12-17 17:43  wwj007  阅读(253)  评论(0)  编辑  收藏  举报
……