vue項目中如何做到點擊表頭，對應(yīng)列進入可編輯狀態(tài)？

用戶表格中要求新增一列自定義名稱，點擊表頭的自定義名稱后，該列均進入可編輯模式，
起初想的是v-if 控制的label和input切換（代碼如下），但是并不起效果。另外也覺得這樣做很蠢，請問有什么更好的辦法嗎？

<table class="table baseTable">
    <thead>
        <tr>
            <th>序號</th>
            <th>用戶名</th>
            <th>自定義名稱<span @click="isEdit=！isEdit">點擊這里進入編輯</span></th>
            <th>帳號</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item,index) in infoList" v-bind:key="index">
            <td>{{index+1+10*(currentPage-1)}}</td>
            <td>{{item.displayName}}</td>
            <td>
                <label v-if="isEdit == false">{{item.customName}}</label>
                <div v-else>
                    <input  v-model="item.customName"/>
                    <button @click="isEdit =！isEdit">確定</button>
                </div>
            </td>
            <td>{{item.userName}}</td>
        </tr>
    </tbody>
</table>