Vue2.0 ElementUI中 穿梭表的應用

template

					<el-transfer
                    	style="text-align: left; display: inline-block" :titles="['所有權限', '已有權限']"
                    	:button-texts="['移除', '添加']"
                    	v-model="value" :data="data">
                    </el-transfer>

• data

 data: [],
value: [],

• method

	 getAllPerms() {
        var params1 = new URLSearchParams();
        params1.append('offset', 0);
        params1.append('limit', 100);
        this.axios({
          method: 'post',
          data: params1,
          url: 'api/perm/permPageList',
        }).then(result => {
          var q = result.data.rows;
          q.forEach(({id, name, url}) => {
            var k = {
              id,
              name,
              url
            }
            this.data.push({
              key: k.id,
              label: name,
              disabled: false,
            })
          })
        }).catch(error => {
          this.$message.error("網絡異常");
        })
      },
	handleEdit(index, row) {
        this.dialogFormVisible = true;
        this.form.name = row.name;
        this.form.type = row.type;
        this.form.id = row.id;

        var q = row.rolePerms;
        q.forEach(({id}) => {
          var k = {
            id,
          }
          this.value.unshift(k.id);
        })
      },