首页 > 编程学习 > element常用代码合集

element常用代码合集

发布时间:2023/1/25 12:41:07

增 ( this.DataList.push(newData)

点击按钮弹出对话框,填写添加内容

<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button><el-dialogtitle="提示":visible.sync="dialogVisible"width="30%":before-close="handleClose"><span>这是一段信息</span><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span>
</el-dialog>export default {data() {return {dialogVisible: false};},methods: {handleClose(done) {this.$confirm('确认关闭?').then(_ => {done();}).catch(_ => {});}}};//点击按钮,添加新用户adduser(){this.$refs.addFormRef.validate(async valid {if(lvalid) return//可以发起添加用户的网络请求const { data:res}=await this.$http.post ('users', this.addForm)if (res.meta.status !==201){ this.$message.error('添加用户失败!) this.$message.success('添加用户成功!') //隐藏添加用户的对话框this.addDialogVisible=false //重新获取用户列表数据this.getUserList() }){ 

删除 、修改

//拿到id
<el-table-column label="操作"><template slot-scope="scope"><el-button size="mini" type="primary" icon="el-icon-edit" @click="showEditDialog(scope.row.attr_id)">编辑</el-button><el-button size="mini" type="danger" icon="el-icon-delete" @click="removeParams(scope.row.attr_id)">删除</el-button></template></el-table-column>//消息提示
if (res.meta.status !== 200) {return this.$message.error('获取商品列表失败!')}this.$message.success('获取商品列表成功!')console.log(res.data)//请求方法async getGoodsList() {const { data: res } = await this.$http.get('goods', {params: this.queryInfo})if (res.meta.status !== 200) {return this.$message.error('获取商品列表失败!')}this.$message.success('获取商品列表成功!')console.log(res.data)this.goodslist = res.data.goodsthis.total = res.data.total},handleSizeChange(newSize) {this.queryInfo.pagesize = newSizethis.getGoodsList()},add (item) {this.my_tableData.push(item)this.my_skuId.push(item.id)},
del (item, i) {this.my_tableData.splice(i, 1)this.my_skuId.splice(i, 1)// this.my_tableData.push(item)// this.my_tableData.push(item)// this.my_skuId.push(item.sku)},

分页代码

<el-pagination @size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="ruleForm.pageNum":page-sizes="[1, 20, 30, 40]":page-size="ruleForm.pageSize"layout="total, sizes, prev, pager, next, jumper":total="list_total"></el-pagination>ruleForm: {pageNum: 1,pageSize: 10},
// 分页handleSizeChange (val) {this.ruleForm.pageSize = valthis.containerskucityauditList()console.log(`每页 ${val} 条`)},handleCurrentChange (val) {this.ruleForm.pageNum = valthis.containerskucityauditList()console.log(`当前页: ${val}`)},

 重置代码

<el-button size="mini"icon="el-icon-refresh"@click="resetForm('ruleForm')">重置</el-button> // 重置resetForm (formName) {this.$refs[formName].resetFields()},

vuex

 


本文链接:https://www.ngui.cc/el/2883524.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000