Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

a-table 使用 template 配置 column的scopedSlots 表格列无法渲染列 slot 内容 #403

Closed
1 task
winken168 opened this issue Jan 15, 2019 · 3 comments
Labels

Comments

@winken168
Copy link

  • I have searched the issues of this repository and believe that this is not a duplicate.

Version

1.3.1

Environment

msox chrome vue 2.5

Reproduction link

Edit on CodeSandbox

Steps to reproduce

{{ renderYesNo(record[item.key]) }}

<a-tag
slot="ismenu"
slot-scope="text,
record"
:color="record['ismenu'] == 1 ? 'blue' : 'red'"
key="ismenu"

{{ renderYesNo(record["ismenu"]) }}</a-tag

<script> import ATable from "ant-design-vue/es/table/Table"; export default { name: "App", props: { 。。。 }, data() { return { 。。。。 columnSlots: [], needTotalList: [] }; }, methods: { updateSelect(selectedRowKeys, selectedRows) { 。。。。 }, /**表格数据字段初始化 */ gridColumns_init() { const that = this; this.gridColumns = this.columnsConfigs.map(item => { let column = { width: item.width, title: item.cn_name || item.en_name, key: item.en_name || item.cn_name, gid: item.gid }; if (item.ctr_type == "bit") { column.scopedSlots = { customRender: item.en_name || item.cn_name }; that.columnSlots.push({ key: item.en_name, slot: "tag" }); } else { column.dataIndex = item.en_name; } return column; }); console.log("columnSlots-->", this.columnSlots); this.loadDatas(); }, /** 加载表格字段配置信息 */ loadConfig() { this.columnsConfigs = [ { gid: "2019010803260500046", en_name: "gid", cn_name: "主键", ctr_type: "text" }, { gid: "2019010803260500058", en_name: "ismenu", cn_name: "是否是菜单", ctr_type: "bit" }, { gid: "2019010803260500061", en_name: "isopen", cn_name: "是否打开", ctr_type: "bit" } ]; }, /** 加载表格数据 */ loadDatas() { this.dataSource = [ { isopen: 1, gid: "100000000000000001", ismenu: 1 }, { isopen: 1, gid: "100000000000000002", ismenu: 1 }, { isopen: 1, gid: "100000000000000003", ismenu: 1 }, { isopen: 1, gid: "100000000000000004", ismenu: 0 }, { isopen: 0, gid: "100000000000000005", ismenu: 1 }, { isopen: 0, gid: "100000000000000006", ismenu: 1 } ]; }, renderYesNo(val) { return val === 0 || val === "0" ? "否" : "是"; } }, watch: { columnsConfigs: function() { this.gridColumns_init(); } }, created() { this.loadConfig(); } }; </script> <style></style>

What is expected?

{{ renderYesNo(record[item.key]) }}

这样使用模板循环绑定的方式无法实现既定的效果,能否这样使用?或有没其它的方式。

What is actually happening?

colum slot 能正常渲染出这一列的内容 : {
gid: "2019010803260500061",
en_name: "isopen",
cn_name: "是否打开",
ctr_type: "bit"
}

@winken168
Copy link
Author

问题代码请看 https://codesandbox.io/s/81rv6x4y5j

@tangjinzhou
Copy link
Member

@github-actions
Copy link

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 31, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants