jeecg-boot前端學習總結（一）

這個控件樣式的製作和使用
首先是一個表格

   <a-table
          :columns="columns"
          :dataSource="data"
          :pagination="false"
        >  </a-table>

表格行定義

    columns: [
          {
            title: '成員姓名',
            dataIndex: 'name',
            key: 'name',
            width: '20%',
            scopedSlots: { customRender: 'name' }
          },
          {
            title: '工號',
            dataIndex: 'workId',
            key: 'workId',
            width: '20%',
            scopedSlots: { customRender: 'workId' }
          },
          {
            title: '所屬部門',
            dataIndex: 'department',
            key: 'department',
            width: '40%',
            scopedSlots: { customRender: 'department' }
          },
          {
            title: '操作',
            key: 'action',
            scopedSlots: { customRender: 'operation' }
          }
        ],

然後是插槽遍歷

  <template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record, index">
            <a-input
              :key="col"
              v-if="record.editable"
              style="margin: -5px 0"
              :value="text"
              :placeholder="columns[i].title"
              @change="e => handleChange(e.target.value, record.key, col)"
            />
            <template v-else>{{ text }}</template>
          </template>

 <template slot="operation" slot-scope="text, record, index">
            <template v-if="record.editable">
              <span v-if="record.isNew">
                <a @click="saveRow(record.key)">添加</a>
                <a-divider type="vertical" />
                <a-popconfirm title="是否要刪除此行？" @confirm="remove(record.key)">
                  <a>刪除</a>
                </a-popconfirm>
              </span>
              <span v-else>
                <a @click="saveRow(record.key)">保存</a>
                <a-divider type="vertical" />
                <a @click="cancel(record.key)">取消</a>
              </span>
            </template>
            <span v-else>
              <a @click="toggle(record.key)">編輯</a>
              <a-divider type="vertical" />
              <a-popconfirm title="是否要刪除此行？" @confirm="remove(record.key)">
                <a>刪除</a>
              </a-popconfirm>
            </span>
          </template>

新增成員按鈕

在這裏插入代碼片

  <a-button style="width: 100%; margin-top: 16px; margin-bottom: 8px" type="dashed" icon="plus" @click="newMember">新增成員</a-button>

新增方法如下

   newMember () {
        this.data.push({                      //數據源 增加一個數組 ，按照key值來，動態使用的時候每次key給+1
          key: '-1',
          name: '',
          workId: '',
          department: '',
          editable: true,                //表示是否可以編輯
          isNew: true                
        })
      },

點擊新增按紐的效果

編輯方法

 toggle (key) {
        let target = this.data.filter(item => item.key === key)[0]        //篩選出 數據源 key 等於傳入的key的第一個值
        target.editable = !target.editable                       //設置爲可編輯
      },

刪除方法

 remove (key) {
        const newData = this.data.filter(item => item.key !== key)  //把 傳入的key值剔除
        this.data = newData                                      //賦予數據源
      },

添加方法

  saveRow (key) {
        let target = this.data.filter(item => item.key === key)[0]
        target.editable = false
        target.isNew = false
      },

取消方法

 cancel (key) {
        let target = this.data.filter(item => item.key === key)[0]
        target.editable = false
      },