element常用代码合集

增 （ 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