制作一个列表可增、 删、 改 ,如图:
html 代码
<!--用的是单独加载的方式 -->
<!--elementUi 样式文件 在官网下载 -->
<link rel="stylesheet" href="./lib/element-ui/index.css">
<!-- 样式文件 -->
<link rel="stylesheet" type="text/css" href="css/default/el-common.css"/>
<!--vue js文件 在官网下载 -->
<script src="./js/default/vue.min.js"></script>
<!--elementUi js文件 在官网下载 -->
<script src="./lib/element-ui/index.js"></script>
<div id="app">
<div class="elTableCont">
<template>
<el-row class="elTableTopBtn">
<el-button size="mini" type="primary" @click="handleAdd">新增</el-button>
</el-row>
<el-table :data="tableData" border stripe>
<el-table-column type="index" :index="indexMethod" label="行号" width="100" align="center"> </el-table-column>
<el-table-column label="序号" width="100" align="center">
<template slot-scope="scope">
{
{ (current - 1) * size + scope.$index + 1 }}
</template>
</el-table-column>
<el-table-column prop="date" label="日期" width="180" align="center">
<template slot-scope="{row, $index}">
<el-input v-if="showEdit[$index]" class="edit-cell" v-model="row.date" placeholder="请输入日期" size="mini"></el-input>
<span v-else>