vue進階總結三

請求接口返回的字段,渲染的時候需要拼接部分字符串,起初盲目for循環拼接,下班後回想起總感覺不對勁,果然,哈哈,vue變量字符串拼接是各種支持的呢

// 表格渲染,行數據單獨處理  slot-scope="scope"
	<el-table-column label="站點LOGO" width="180">
      <template slot-scope="scope">
      <!-- <img :src="'http://web.test.net/web/websiteimg/'+scope.row.icon+'.png'" width="80"> -->
     <img :src="`http://web.test.net/web/websiteimg/${scope.row.icon}.png`" width="80">
     </template>
   </el-table-column>

彈框表單 當前頁面進行新增、刪除需要刷新,要不數據渲染不會變化,方法reload,其實和mounted執行的內容一樣的(不太友好)

	<el-dialog :title="subname" :visible.sync="dialogFormVisible">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用戶名" prop="username" :rules="[
          { required: true, message: '請輸入用戶名', trigger: 'blur' },
        ]">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密碼" prop="password" :rules="[
          { required: true, message: '請輸入密碼', trigger: 'blur' },
        ]">
          <el-input v-model="ruleForm.password"></el-input>
        </el-form-item>
        <el-form-item label="手機號" prop="phone">
          <el-input v-model.number="ruleForm.phone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button v-if="isub" type="primary" @click="submitForm('ruleForm')">確 定</el-button>
          <el-button v-else type="primary" :loading="true">請求處理中...</el-button>
          <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
          <el-button @click="resetForm('ruleForm')">取 消</el-button>
        </el-form-item>
      </el-form>

      <div v-if="errmsg != ''">
        <el-alert :title="errmsg" type="error" effect="dark">
        </el-alert>
      </div>
    </el-dialog>


	submitForm(formName) {
        let that = this
        that.$refs[formName].validate((valid) => {
          if (valid) {
			var basedata = {}
            that.$ajax.post('/test/test/test', basedata)
              .then(function(response) {
                var res = response.data
                if (response.data.code == 1) {
                  that.$message({
                    message: response.data.msg,
                    type: 'success'
                  });
                  that.reload()
                } else if (response.data.code == 2) {
                  
              })
              .catch(function(error) {
                console.log(error);
              })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
	reload() {
        this.loading = true
        this.showcaccount()
      }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章