el-table-column 里的prop根据name获取到值为hierarchy,如何进行拼接为hierarchy代理
时间: 2024-05-04 09:19:37 浏览: 11
假设你已经有了一个变量`propName`,其值为`hierarchy`,那么可以使用字符串拼接的方式将其拼接为`hierarchy代理`,代码如下:
```
const propName = 'hierarchy';
const propValue = `${propName}代理`;
console.log(propValue); // 输出结果为"hierarchy代理"
```
在el-table-column组件中,可以这样使用:
```
<el-table-column
:prop="`${propName}代理`"
...
></el-table-column>
```
这样,`prop`的值就会被设置为`hierarchy代理`。
相关问题
el-table-column 里的prop根据name获取到值为hierarchy,如何进行拼接为hierarchy_1
如果你想在 el-table-column 的 prop 中拼接一个数字 1,可以使用字符串拼接的方式。例如,如果 prop 的值为 'hierarchy',你可以这样写:
```
<el-table-column
prop="hierarchy"
:label="'Hierarchy ' + index"
/>
```
其中,index 是一个变量,表示当前列的索引。这样,就可以在表头中显示 "Hierarchy 1"、"Hierarchy 2" 等。
如果你想在 el-table-column 的 prop 中拼接一个数字 1,可以使用字符串模板的方式。例如,如果 prop 的值为 'hierarchy',你可以这样写:
```
<el-table-column
:prop="`hierarchy_${index}`"
:label="'Hierarchy ' + index"
/>
```
其中,反引号 \` 表示字符串模板,${index} 表示将 index 变量插入到字符串中。这样,就可以动态地生成 'hierarchy_1'、'hierarchy_2' 等属性。
在dialog中获取el-table-column中设置prop的值
在dialog中获取el-table-column中设置prop的值,可以通过以下步骤实现:
1. 在el-table-column中设置prop属性,如下所示:
```
<el-table-column prop="name" label="姓名"></el-table-column>
```
2. 在dialog中使用ref属性获取el-table组件的实例,如下所示:
```
<el-dialog ref="dialog">
<el-table ref="table" :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
</el-table>
</el-dialog>
```
3. 在dialog的方法中使用this.$refs.table.columns获取所有列的配置信息,然后通过prop属性获取对应列的prop值,如下所示:
```
methods: {
showDialog() {
const columns = this.$refs.table.columns;
const nameProp = columns.find(column => column.prop === 'name');
console.log(nameProp.prop); // 输出'name'
this.$refs.dialog.show();
}
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)