增 ( this.DataList.push(newData))
点击按钮弹出对话框,填写添加内容
<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>
<el-dialog
title="提示"
: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.goods
this.total = res.data.total
},
handleSizeChange(newSize) {
this.queryInfo.pagesize = newSize
this.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 = val
this.containerskucityauditList()
console.log(`每页 ${val} 条`)
},
handleCurrentChange (val) {
this.ruleForm.pageNum = val
this.containerskucityauditList()
console.log(`当前页: ${val}`)
},
重置代码
<el-button size="mini"
icon="el-icon-refresh"
@click="resetForm('ruleForm')">重置</el-button>
// 重置
resetForm (formName) {
this.$refs[formName].resetFields()
},
vuex