一、概述
现有一个基于element-ui开发的后台页面,效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/99db20ba9f682096c2881d51cb235c05.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>
效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/8d5c2543e3db65eec43793f308d681ff.png)