場景

Vue+ElementUI+SpringBoot+Mysql

需要設計一些屬性為是否，即只有兩個選擇的屬性欄位。

注：

部落格：
https://blog.csdn.net/badao_liumang_qizhi
關注公眾號
霸道的程式猿
獲取程式設計相關電子書、教程推送與免費下載。

實現

首先設計Mysql資料庫，此欄位設計為長度為1的tinyint

然後在SpringBoot中的實體類中

 private Boolean sfkt;

將其設定為Boolean

這樣在使用程式碼生成器等時會自動將0對映為false，將1對映為true。

這樣在mapper的xml中仍然可以使其作為查詢條件

    <select id="selectKqBcglList" parameterType="KqBcgl" resultMap="KqBcglResult">
        <include refid="selectKqBcglVo"/>
        <where>
            <if test="bcbh != null  and bcbh != ''"> and bcbh = #{bcbh}</if>
            <if test="sfkt != null  and sfkt != ''
 
"> and sfkt = #{sfkt}</if>
            <if test="xss != null  and xss != ''"> and xss = #{xss}</if>
            <if test="sfyb != null  and sfyb != ''"> and sfyb = #{sfyb}</if>
        </where>
    </select>

在Element中通過axios請求介面後獲取資料時獲取的是0和1。

如果此時不加格式化的化就會在頁面上顯示1和0。

所以在

<el-table-column label="是否跨天" align="center" prop="sfkt" :formatter="sfktFormate" />

新增formatter屬性對應的sfktFormate是一個方法

    sfktFormate(row, index) {
      if (row.sfkt == 1) {
        return "是";
      } else {
        return "否";
      }
    },

其中row就是傳遞的當前行物件，row.sfkt要對應上面prop的sfkt

這樣就能格式化顯示為是和否