elementui 用法学习 （搭配图书管理系统）

删除调用接口

<el-button  size="mini" type="danger" @click="handleDelete(scope.row)" style="margin-top: 5px;">删除</el-button >

Vue.component('bookstable',

methods: {
handleDelete(index, row) {
    this.tableData.splice(index,1);
},
}

删除调用接口_"@click=\"handledelete(scope.row)"_Trine_cui的博客-CSDN博客 

点击修改按钮，出现对话 悬浮框

• 点击修改按钮，出现一个修改悬浮框，展示要修改的回显数据

 

  <!-- 修改对话框 -->
  <div>
      <el-dialog title="修改分类" :visible.sync="dialogFormVisible">
      <el-form>
          <el-form-item label="分类名称">
          <el-input v-model="updateCategory.cname" autocomplete="off"></el-input>
          </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="update()">确 定</el-button>
      </div>
      </el-dialog>
  </div>

• el-dialog ： 定义一个对话框
• v-model ： 双向绑定数据，回显数据
• ：visible.sync = 根据 dialogFormVisible 属性的boolean值，判断是否显示。 true为显示 ， false为隐藏
• 

 

模糊查询，表格中搜索框

• 在elementUI的官网中，表格中有一个 自定义表头的样式，具有条件搜索框

•   <el-table-column
    width="155">
    <!-- slot指定为 header头部 -->
        <template slot="header" slot-scope="scope">
            <el-input
            v-model="search"
            size="mini"
            placeholder="输入关键字搜索"
            @keyup.native="searchBook()"/>
        </template>
    </el-table-column>
  

  <!--        查询和添加按钮-->
          <div style="margin-top: 20px;margin-bottom: 20px ">
              <el-row >
                  <el-col :span="18" ><el-input v-model="bookid" placeholder="请输入图书的编号" ></el-input></el-col>
                  <!--type ： 指定按钮以什么形式展示， text超链接文本形式，不写type，则以原生的 button按钮展示-->
                  <el-col :span="2" ><el-button type="primary" @click="find" >查询</el-button></el-col>
                  <el-col :span="4" >
                      <addbook diabuttonname="添加图书"
                               v-on:add="add1book">
                      </addbook>
                  </el-col>
              </el-row>
          </div>

  template ： 模块代码，一般的代码如果不以属性写入 el-column中，就要写在此中

  slot ： 设置为 header， 为当前为标头

  slot-scope ： 绑定当前列行数据，不加此属性，文本框无法输入

  el-input ： 文本输入框，双向绑定一个 属性数据

  @keyip.native ： 绑定键盘按起事件，输入字符之后，直接调用函数，查询条件数据

  .native ： el-input 封装过硬件（键盘，鼠标）的触发事件，不加 .vative无法触发效果

• Element-UI详解_element ui_一名努力的小码农的博客-CSDN博客

用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

<el-header>：顶栏容器。

<el-aside>：侧边栏容器。

<el-main>：主要区域容器。

<el-footer>：底栏容器。
 

Element-UI快速入门_element ui_陶然同学的博客-CSDN博客