Element: 使用表格的formatter为表格增加“操作”列

[yefengong]

我的情况是这样的，有一个商品分类的列表使用了表格。我想添加一列，名为“操作”

formatter(row, column) {
    return '<a href="/category/edit/' + row.id + '"></a>';
}

结果在浏览器上直接显示了

<a href="/category/edit/2"></a>

[yefengong]

我再次尝试用inline-template，按照文档中使用<div>{{ row.date }}</div>没有问题。然后我用<div><a href="{{ row.id }}"></a></div>会出错

[Leopoldthecoder]

使用 inline-template，然后 <div><a :href="row.id"></a></div>

[yefengong]

但是<div><a :href="/category/edit/row.id"></a></div>还是不行。

[Leopoldthecoder]

<div><a :href="'/category/edit/' + row.id"></a></div>
建议先熟悉一下 v-bind 的语法。

[yefengong]

你说的是不错，但是没能解决我的问题。
最后这么搞了
template

        <el-table
                :data="gridData"
                style="width: 100%"
                @cellclick="operate">
            <el-table-column
                    property="name"
                    label="分类名称">
            </el-table-column>
            <el-table-column
                    property="id"
                    label="分类id"
                    width="180">
            </el-table-column>
            <el-table-column
                    property="sort_order"
                    label="排序"
                    width="180">
            </el-table-column>
            <el-table-column
                    inline-template
                    label="浏览"
                    width="180">
                <div>浏览</div>
            </el-table-column>
            <el-table-column
                    inline-template
                    label="编辑"
                    width="180">
                <div>编辑</div>
            </el-table-column>
            <el-table-column
                    inline-template
                    label="删除"
                    width="180">
                <div>删除</div>
            </el-table-column>
        </el-table>

script

        methods: {
            operate(row,column,cell,event) {
                switch(column.label)
                {
                case '浏览':
                  console.log('浏览' + row.id);
                  break;
                case '编辑':
                  console.log('编辑' + row.id);
                  break;
                case '删除':
                  console.log('删除' + row.id);
                  break;
                }
            }
        }

如果还有其他好办法，麻烦告诉我一下

[Leopoldthecoder]

你的问题是啥？点击「浏览」、「编辑」和「删除」时跳到对应的链接？用我上面的写法应该没问题。

[furybean]

@yefengong 这么搞太复杂了，你把 delete 定义到 instance 上，可以直接这么做：

<el-table-column
                    inline-template
                    label="删除"
                    width="180">
                <div @click="delete">删除</div>
</el-table-column>

[user20161119]

@Leopoldthecoder 显示成html代码了，不是link效果

<div><a :href="'/category/edit/' + row.id"></a></div>
建议先熟悉一下 v-bind 的语法。