CGB2011-三阶段-DAY09

1. vue-绑定表单数据

1.1 编辑表格element-ui格式的html

    <el-row>
      <el-table>
        <el-table-column label="书名"></el-table-column>
        <el-table-column label="作者"></el-table-column>
        <el-table-column label="价格"></el-table-column>
        <el-table-column label="介绍"></el-table-column>
      </el-table>
    </el-row>
  </div>
</template>

1.2 编辑数据

<script>
  export default{
    name:"Book",
    data(){
      return{
        sysname:"京淘图书管理系统",
        list:[{name:"《Java核心技术卷》",author:"阿里巴巴",price:"99.30",intro:"sjdbhfdbf"}]
      }
    }
  }
</script>

1.3 绑定数据

<el-table :data="list">
        <el-table-column 
        	prop="name" 
        	label="书名" 
        	width="160">
        </el-table-column>

效果展示

绑定多条数据

<script>
  export default{
    name:"Book",
    data(){
      return{
        sysname:"京淘图书管理系统",
        list:[{name:"《Java核心技术卷》",author:"阿里巴巴",price:"99.30",intro:"我只是测试数据1"},
        {name:"《Java编程思想》",author:"无敌",price:"66.66",intro:"我只是测试数据2"}]
      }
    }
  }
</script>

效果展示

2. 增加删除功能

2.1 添加删除按钮

<!-- slot-scope vue带的，它实现动态编程
	它会提供当前行的索引值 scope.$index 
	可以简写为<template slot-scope="s">
	{{s.$index}}-->
<el-table-column label="功能">
	<template slot-scope="scope">
		<el-button type="warning" icon="el-icon-edit">修改</el-button>
		<el-button type="danger" icon="el-icon-delete" @click="del(scope.$index)">{{scope.$index}}删除</el-button>
	</template>
</el-table-column>

2.2 增加删除事件

splice()函数

splice(x,0) //没有任何意义
splice(x,1) //删除下标为x的元素(删除)
splice(x,2) //从下标为x的元素开始(含),往后删除两个元素(批量删除)
splice(x,0,"a") //在下标为x的元素前插入a元素(插入)
splice(x,1,"a") //删除下标为x 的元素并插入a元素(替换)

2.3 新增、修改、弹出对话框

2.3.1 编辑弹出对话框代码

<el-dialog title="提示信息" :visible.sync="dialogVisible" width="30%">
	<div>这是一个对话框</div>
	<div slot="footer" class="dialog-footer">
		<el-button>取消</el-button>
		<el-button>确认</el-button>
	</div>
</el-dialog>

2.3.2 设置全局变量

2.3.3 编辑绑定事件

效果初步展示

2.3.4 添加表单

        <div>
          <el-form :model="m" label-width="40px">
            <el-form-item label="书名">
              <el-input v-model="m.name" placeholder="请输入书名..."></el-input>
            </el-form-item>
            <el-form-item label="作者">
              <el-input v-model="m.author" placeholder="请输入作者..."></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="m.price" placeholder="请输入价格..."></el-input>
            </el-form-item>
            <el-form-item label="介绍">
              <el-input type="textarea" v-model="m.intro" placeholder="请输入介绍..."></el-input>
            </el-form-item>
          </el-form>
        </div>

2.3.5 编辑model绑定的数据

    data(){
      return{
        dialogVisible:false,
        m:{
          name:null,
          author:null,
          price:null,
          intro:null
        },
        sysname:"京淘图书管理系统",
        list:[{name:"《Java核心技术卷》",author:"阿里巴巴",price:"99.30",intro:"我只是测试数据1"},{name:"《Java编程思想》",author:"无敌",price:"66.66",intro:"我只是测试数据2"}]
      }
    },

效果展示