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

Question

有两个问题

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>

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

Answer 1

问题已经解决了，感谢 @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>

Answer 2

<el-table-column prop="arr.length ? arr.length : '0'" label="数组长度">
    <a href="javascript:;" @click="fun()">
        {{arr.length}}
    </a>
</el-table-column>

Answer 3

1 第一个问题标题 是0显示空白，结尾又是0 显示0？

 <el-table-column prop="arr.length" :formatter="deal" label="数组长度" min-width="100" />

deal(row, column) {
    if(!row.lenght){
        return '';
    }
}

2.

<el-table-column label="链接" min-width="170">
       <template scope="scope">
             <el-button size="small" @click="click(scope.$index, scope.row)">
                  点击文字
              </el-button>
        </template>
</el-table-column>

click(idx,row){
    doSomething...
}