vue字符串切割

发布时间:2021-02-07 09:53:24编辑:admin阅读(210)

    一、概述

    现有一个基于element-ui开发的后台页面,效果如下:

    1.png

     

    需要将公司名进行切割,每一行,显示一个公司。

     

    二、代码实现

    test.vue

    <template>
      <el-table
        :data="tableData"
        border
        style="width: 362px">
        <el-table-column
          prop="id"
          label="id"
          width="180">
        </el-table-column>
        <el-table-column
          prop="name"
          label="公司名"
          width="180">
          <template slot-scope="scope">
            <div v-for="item in companyCut(scope.row.name)">
              {{item}}<br>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    
    <script>
      export default {
        name: "test",
        data() {
          return {
            tableData: [{
              id: '2016-05-02',
              name: '阿里云',
            }, {
              id: '2016-05-04',
              name: '腾讯控股、字节跳动',
            }, {
              id: '2016-05-01',
              name: '美团、金蝶国际、台积电',
            }]
          }
        },
        methods: {
          // 切割公司列表
          companyCut(name){
            let company=name.split("、")
            return company
          },
        }
      }
    </script>
    
    <style scoped>
    
    </style>


    效果如下:

    1.png

     


关键字

上一篇: ElementUI 分页

下一篇: vue 验证码