vue.js - ElementUI 中的 el-table 内数据显示问题

问题描述

问 题

有两个问题

1. 问题一、某一列数据显示的是数组的长度，当长度为0时，不显示0，显示为空白

   <template>
       ...
       <el-table-column prop="arr.length" label="数组长度">
       </el-table-column>
       ...
   </template>

   想要的效果是： 当长度为 0 时， 就显示 0

2. 问题二、该数组长度的数据如何以超链接的形式显示

   <template>
       ...
       <el-table-column label="数组长度">
           <a href="javascript:;" @click="fun()">
               这里如何写？能够显示数组长度的值？？？
           </a>
       </el-table-column>
       ...
   </template>

   或者，不按照上面这种写法，应该怎样实现这种效果？？

解决方案

问题已经解决了，感谢 @leohsun 提供的方向。

问题一解决方案
使用 el-table-column 中的 formatter属性

<template>
    ...
    <!-- 注意： 这里的 prop 的值不写成 arr.length -->
    <el-table-column prop="arr" :formatter="fmtLength" label="数组长度">
    </el-table-column>
    ...
</template>
<script>
    export default {
        methods: {
            fmtLength (row, column) {
                const arr = row[column.property]
                /* 这里的 if(arr === undefined)
                 * 是根据自己的需求，决定arr长度为0时的判断条件
                 * 可以和这个不同
                 */ 
                if(arr === undefined){
                    return '0'
                } else {
                    return arr.length
                }
            }
        }
    }
</script>

注意点：

1. prop 的值应该写成 arr 本身，因为有可能 arr的值可能为 undefined(这个和具体的需求有关)

问题二解决方案
使用 html 中的 scope属性

这里使用的是 el-table-column 嵌套 el-button, 因此无法使用 prop 和 formatter,来看具体的使用

<template>
    ...
    <el-table-column label="数组长度">
        <template scope="scope">
            <!-- 数组长度不为 0 时的判断，同样，要根据自己需求决定判断条件 -->
            <el-button v-if="scope.row.arr" type="text" @click="onClick(scope.$index, row)">
                {{scope.row.arr.length}}
            </el-button>
            <!-- 数组长度为 0 时，或者说这个数组不存在 ,显示 0， 并且不可点击-->
            <span v-else> 0 </span>
        </template>
    </el-table-column>
    ...
</template>
<script>
    export default {
        methods: {
            onClick (index, row) {
                // TODO: 做你想做的事...
            }
        }
    }
</script>

这篇关于vue.js - ElementUI 中的 el-table 内数据显示问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！