현재 상태값에 따른 버튼 색상, 문구 변경하기

나에게 하나씩 일거리가 떨어질 때마다 너무 행복하다~!~!

 

이번에는 상태값에 따라 버튼 색상과 문구을 변경하는 일이었는데,

만약에 어떤 사람의 상태값이 Y라면 비활성화, 흰색으로,

N이라면 활성화, 녹색 버튼으로 표현되게 하는 기능이었다.

 

현재 프로젝트에서 Table을 공통 컴포넌트로 분리해서 사용하고 있었는데

나는 사용하는 법만 알고 있었기 때문에...ㅠㅠ

table 컴포넌트를 이해하는데 살짝.. 시간이 걸렸다..!

            <!-- 비활성화 동작하는 버튼(활성화 상태)-->
            <div
              v-else-if="col.name === 'state' && props.row.delYn === 'N'"
            >
              <q-btn
                class="y-btn enable"
                :label="활성화"
                @click.stop="clickButton(props.row, 'disable')"
              />
            </div>
            <!-- 활성화 동작하는 버튼(비활성화 상태)-->
            <div
              v-else-if="col.name === 'state' && props.row.delYn === 'Y'"
            >
              <q-btn
                class="y-btn disabled"
                :label="비활성화"
                @click.stop="clickButton(props.row, 'active')"
              />
            </div>
            
            
            <script setup lang="ts">
                /**
                 * 버튼 컬럼 클릭 이벤트
                 * @param row 선택한 목록 데이터
                 * @param column 선택한 컬럼 이름
                 */
                const clickButton = (row, column) => {
                  emit('clickButton', row, column);
                };
            </scirpt>

우선 table 컴포넌트에서 props.rows.delYn값에 따라 

btn의 class와 label, click했을때 동작하는 이벤트를 작성해주었다.

 

그리고 table 컴포넌트를 사용하는 쪽에서 

      <Table
        :columns="columns"
        :rows="rows"
        :button-names="buttonNames"
        @click-button="clickTableButton"
      />

 

이렇게 추가해 주었다.

그리고 columns에 버튼이 들어갈 자리를 state로 추가해 주었고,

props로 delYn값을 넘기기 위해 rows에 delYn과 state값을 추가했다.

const rows = computed(() => {
  return (
    list.value?.data?.map((item) => {
      return {
        delYn: item.DEL_YN ?? '-',
        state: item.DEL_YN,
      };
    }) ?? []
  );
});

const columns = [
  {
    name: 'state',
    label: '현재상태',
    field: 'state',
    required: true,
  },
];

이렇게 하면,

columns의 state 값자리에 delYn값에 따른 버튼이 생기게 된다!!

 

거기에 추가적으로, 버튼을 클릭하면 상태를 변경할 수 있도록 하는 기능도 추가해 보았다. 

const clickTableButton = (row, column) => {
  if (column === 'disable') {
      disableUser(id);
  }

  if (column === 'active') {
      enableUser(id);
  }
};

활성화상태라면 disable을 처리하는 함수를 호출하고, 비활성화상태라면 enable을 처리하는 함수를 호출해서 

상태값을 변경할 수 있다.

여기에 나는 변경하시겠습니까? 팝업도 띄우고 확인을 눌렀을 때만 변경할 수 있도록 하는 로직도 추가했다.