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>
    或者,不按照上面这种写法,应该怎样实现这种效果??
阅读 42.6k
3 个回答

问题已经解决了,感谢 @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, 因此无法使用 propformatter,来看具体的使用

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

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...
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏