39. 상세 페이지 수정(element)

39. 상세 페이지 수정(element)

현재 만들어진 상세 페이지를 element를 이용하여 보기 좋게 수정한다.

상세 페이지

• element from copy

element 홈페이지에서 상세 페이지에 사용할 form의 code를 copy 한다.

사용할 form 찾기

사용할 code copy

• vue에 적용

        <el-form ref="formRef" :model="form" label-width="120px">

            <el-form-item label="이름">

                {{player.playername}}

            </el-form-item>

            <el-form-item label="나이">

                {{player.playername}}

            </el-form-item>

            <el-form-item label="신장">

                {{player.playerheight}}

            </el-form-item>

            <el-form-item label="몸무게">

                {{player.playerweight}}

            </el-form-item>

            <el-form-item label="포지션">

                {{player.playerposition}}

            </el-form-item>

            <el-form-item label="국적">

                {{player.playercountry}}

            </el-form-item>

            <el-form-item label="몸 값">

                {{player.playerprice}}

            </el-form-item>

            <el-form-item label="사진">

                <img :src="`${playerimg}`" style="width: 100px; height: 100px" />

            </el-form-item>

        </el-form>

 

• 상세 페이지 확인

간격 조절이 되어 이전보다 보기 좋게 수정되었다.

상세 페이지 수정