el-table多个状态使用switch，页面使用formatter调用

性野喜悲

已于 2022-06-21 16:35:23 修改

阅读量678

点赞数

分类专栏： vue 经验分享

于 2022-06-21 16:34:01 首次发布

本文链接：https://blog.csdn.net/leng0920/article/details/125393658

版权

elementui vue.js javascript

经验分享同时被 2 个专栏收录

149 篇文章 1 订阅

订阅专栏

vue

136 篇文章 4 订阅

订阅专栏

普通写法，使用三目运算符：

html：

                <el-table
                      ref="multipleTable"
                      :data="orderActivityListVOS"
                      tooltip-effect="dark"
                      style="width: 100%"
                      @selection-change="handleSelectionChange"
                    >
                    <el-table-column
                        prop="useType"
                        label="使用条件"
                        width="100"
                      >
                        <template slot-scope="scope">
                        {{
                          scope.row.useType== 1
                            ? "无限制"
                            : scope.row.useType== 2
                            ? "满减"
                        
                            : "—"
                        }}
                        </template>
                      </el-table-column>
                   </el-table>

进阶写法，使用switch：

html：

                  <el-table
                      ref="multipleTable"
                      :data="orderActivityListVOS"
                      tooltip-effect="dark"
                      style="width: 100%"
                      @selection-change="handleSelectionChange"
                    >
                     <el-table-column
                        prop="useType"
                        :formatter="formatterUseType"
                        label="使用条件"
                        width="100"
                      >
                      </el-table-column>
                   </el-table>

js：

methods: {
    // 使用条件（页面使用formatter调用）
    formatterUseType(row) {
      let text = "";
      switch (row.useType) {
        case 1:
          text = "无限制";
          break;
        case 2:
          text = "满减";
          break;
        default:
          text = "—";
      }
      return text;
    },
}