element常用代码合集

今天药忘吃喽~ 2022-09-11 00:19 206阅读 0赞

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

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFyayBzaGVuZw_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFyayBzaGVuZw_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFyayBzaGVuZw_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/a5c5b5345d3b42fda7d7899745e3d4ab.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATWFyayBzaGVuZw_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/494a478a2601488f93ff4bc42917d340.png