1.3 第2页面其实跟第1页面都差不多,但是要注意像表格数据映射名字要换一个名字ref="table" :data="companyTableData",及分页也要换一个名字el-pagination :total="pageTotal" @current-change="currentChange" 1.3 最后两个页面的elementui代码如下: 2.js代码:主要是以下方法调用理清关系 3.最后的页面如下: 提...
先贴代码图,第一张图我就简单贴了下html部分的代码结构,以方便看到对应的方法名。 这里声明一下,relyonTable是这个table的数据源,在data里面,不用传值,是我忘记删了。 下面是方法图,包含了上图中所有的方法 某一行的上移下移就是,先获取当前行的坐标,做一个判断,对于上移就是判断当前行的坐标是否为0,如果...
基于Element-Ui的一个增删改查的数据表格 Star 0 Watch 1 README.md CrudTable 用于Element-UI的增删改查数据表格 属性prop 全局 属性名类型默认值说明 api Object 无 接口对象 idKey String id get/update/del时的主键名 showCheckBox Boolean false 是否显示CheckBox多选 showPage Boolean true 是否显示分页...
<el-table :data="tableData" stripe border style="width:100%" highlight-current-row> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="id" label="ID" align="center" min-width="120"> <template slot-scope="scope"> <span>{{ scope.row.id}}<...
dialog><el-row style="margin: 16px 0px"><el-button size="mini" type="primary" @click="add">新增</el-button></el-row><el-table ref="refTable" :data="tableData" border><el-table-columnv-for="(item,index) in config.itemList.filter(item=>!item.hideInTable)":align="item.align...
<el-table :data="studentData" border style="width: 100%"> <el-table-column prop="id" label="学号"></el-table-column> <el-table-column prop="name" label="姓名"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> ...
1.4 增删改查实现 <script>export default {name: 'BookList',data() {return {bookname: '',tableData: [],rows: 10,total: 0,page: 1,//控制对话框是否显示,默认是隐藏状态dialogFormVisible: false,//统一控制标签的宽度formLabelWidth: '40px',//统一控制表单元素的宽度formEleWidth: '400px',//...
涉及到elementUI,table组件,分页组件,dialog组件,form组件... 完整Demo 分页组件我对其进行了二次封装,需要可看我另篇笔记~
4 table引入 找到table拷贝相应代码,别忘了把数据也拷贝过来,然后把数据改成自己的对象,参见最后完整代码。 简单解释下: <template> <el-table :data="tableData" style="width: 100%"> 这个是table,data里的tableData对应的就是数据,它是一个数组。
table: { columns: [] } }; }, methods: { onLoad({ ctx, app }) { // crud 配置 ctx.service().done(); // 发送 page 接口请求 app.refresh(); } } }; </script> 新增|编辑 { upsert: { items: [ { label: "昵称", prop: "name", ...