常見知識點說明

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

v-for 要配合   ：key  使用 不配合會報 警告

      <el-table-column type="expand">
        <template slot-scope='scope'>
          <el-row :key="item.id"

v-for="item in scope.row.children">
            <el-col :span="3">
              <el-tag @close="deleteRight(scope.row, item.id)" closable>{{item.authName}}</el-tag>

                // scope.row,表示屬於主管 這這一行下的標籤 item.id 表示要關閉的標籤的Id
              <i v-if="item.children.length>0"

class="el-icon-arrow-right arrow"></i>    // 大於0 表示下面有子節點
            </el-col>
            <el-col :span="21">
              <el-row class="authlist" :key="tag.id" v-for="tag in item.children">
                <el-col :span="4">
                  <el-tag @close="deleteRight(scope.row, tag.id)" type="success" closable>{{tag.authName}}</el-tag>
                  <i v-if="tag.children.length>0" class="el-icon-arrow-right arrow"></i>
                </el-col>
                <el-col :span="20">
                  <el-tag @close="deleteRight(scope.row, btn.id)" :key="btn.id"

type="warning" closable v-for="btn in tag.children">{{btn.authName}}</el-tag>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </template>
      </el-table-column> 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

前臺頁面表格裡分別要求顯示一級，二級，三級   但是後臺返回的是字串1,2,3    可用v-if 

vue裡可以這麼寫： 

      <el-table-column
        prop="level"
        width="180"
        label="層級">
        <template slot-scope='scope'>
          <span v-if='scope.row.level === "0"'>一級</span>
          <span v-else-if='scope.row.level === "1"'>二級</span>
          <span v-else>三級</span>
        </template>
      </el-table-column> 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Object.assign是什麼意思啊？

 let para=Object.assign({},this.editform);

使用到的地方有

1，編輯table的某一行的時候。獲取哪一行的資料給編輯的表格。

handleEdit: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },

2，提交的時候。把data裡面定義的一個物件賦值給一個變數，然後把這個變數傳給後臺。

                   let para = Object.assign({}, this.editForm);
                    editAffairtype(para).then((res) => {})

3.合併兩個變數為一個。
                let para={name:'1'};
                let para2={name2:'1'};
                let a=Object.assign(para,para2);   //a就是{name:'1';name2:'1'}
 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

that.$refs['addForm'].resetFields(); 是什麼意思啊？

報錯解決

 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------

通過 scope.row 獲取每一行的資料，但是怎麼獲取每一行的索引呢？

   <el-table max-height="290" :data="userTableData" border style="width: 100%">
          <el-table-column label="序號">
            <template slot-scope="scope">
              {{scope.$index+1}} 
            </template>
          </el-table-column>
          <el-table-column prop="user_nickname" label="使用者暱稱">
          </el-table-column>
          <el-table-column prop="create_time" label="提交時間">
          </el-table-column>
        </el-table>
 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 router.push 和 router.replace 的區別

  methods: {
    toAddProduct () {
      // 跳轉到某個指定的頁面
      this.$router.push({name: 'add'})
    },

  editHandler (row) {

 // 帶著引數 跳轉到某個指定的頁面
  this.$router.push({name: 'edit', params: {id: row.goods_id}})
    },

----------------------------------------------------------------------------------------------------------------------------------------------------------------------- 

gulp 和 webpack 的區別

------------------------------------------------------------------------------------------------------------------------------------------------------------------------ 

element-UI之表格 

    <el-table
    ref="multipleTable"
    :data="tableData3"
    tooltip-effect="dark"          設定溢位隱藏後，滑鼠放入提示全部資訊，這個指的是 那個提示框的背景顏色

    border                                   整個表格帶邊框
    style="width: 60%" 
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"           設定 多選框
      width="100">                 設定每一列表格的寬度
    </el-table-column>
    <el-table-column
      label="日期"
      width="150">
      <template slot-scope="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      show-overflow-tooltip>               每一列設定溢位隱藏，滑鼠放入提示全部資訊
    </el-table-column>
    <el-table-column
      prop="edit"
      label="編輯"
      show-overflow-tooltip>
      <template slot-scope="scope">
        <el-button type="primary" icon="el-icon-edit"  @click="dialogVisible = true"></el-button>
        <el-button type="primary" icon="el-icon-delete"  @click="handleClick(scope.row)"></el-button>   設定圖示樣式
      </template>
    </el-table-column>
  </el-table> 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------ 

@refresh="initList" 

  showEditForm (cid) {
      // 編輯分類第一步
      // 獲取分類下拉列表資料
      getCategories().then(res => {
        if (res.meta.status === 200) {
          this.ecateList = res.data
          // 獲取資料後呼叫獲取分類資訊介面
          return getCateById({id: cid})
        }
      }).then(res => {
        if (res.meta.status === 200) {
          // 把資料填充到表單
          this.ecate.cat_pid = res.data.cat_id
          this.ecate.cat_name = res.data.cat_name
          this.ecate.cat_level = res.data.cat_level
          this.dialogVisible4Edit = true
        }
      })
    },
    refresh () {
      console.log('fresh')
    },
    handleSizeChange (val) {
      // 改變每頁顯示條數
      this.pagesize = val
      this.initList()
    },
    handleCurrentChange (val) {
      // 改變當前頁碼
      this.currentPage = val
      this.initList()
    },
    initList () {
      // 獲取分類列表資料
      getCategories({type: 3, pagenum: this.currentPage, pagesize: this.pagesize}).then(res => {
        if (res.meta.status === 200) {
          this.dataSource = res.data.result
          this.pagesize = res.data.pagesize
          this.total = res.data.total
        }
      })
    }
  },