开发指南136-设置零值不显示

表格里满屏的0蛋不好看，客户要求有不显示零值功能。

平台前端是基于VUE+ElmentUI的，以下方法仅限于这个架构。

第一步：使用选择框来设置是否显示零值，默认不显示

<el-checkbox v-model="askForUnionForm.showZeroInfo" false-label="0" true-label="1" @change="showZeroInfoChange">零值不显示</el-checkbox>

通过@change事件来触发表格显示情况。

第二步：在el-table-column里根据设置来显示是否显示0值，有两种方法

              1、v-if

                 这个简单明了:

                    <template slot-scope="scope">
<span v-if="scope.row.value1!= '0' || askForUnionForm.showZeroInfo === '1'">
{{ scope.row.value1 }}
</span>
</template>

              2、使用formatter

                  formatter 是一个函数，接收四个参数：

                   row：当前行的数据
column：当前列的配置
cellValue：当前单元格的值
index：当前行的索引（从 0 开始）

                 <el-table-column prop="value1"  :formatter="formatData">

    formatData(row, column, cellValue, index) {if (cellValue!= '0' || askForUnionForm.showZeroInfo === '1')return cellValueelse return ""}

平台推荐使用formatData