要实现在
el-dialog中新增
el-table-column的
数据，可以考虑以下步骤：
1. 在
el-dialog中添加表单，用于输入新增的
el-table-column数据；
2. 点击确定按钮时，将表单中的
数据加入到
el-table-column的
数据源中；
3. 在
el-table中动态绑定
el-table-column，使新增的列能够显示出来。
具体实现步骤如下：
1. 在
el-dialog中添加表单，用于输入新增的
el-table-column数据：
```html
<template>
<
el-dialog title="新增列" :visible.sync="dialogVisible">
<
el-form :mod
el="form">
<
el-form
-item lab
el="列名">
<
el-input v
-mod
el="form.lab
el"></
el-input>
</
el-form
-item>
<
el-form
-item lab
el="
字段名">
<
el-input v
-mod
el="form.prop"></
el-input>
</
el-form
-item>
<
el-form
-item lab
el="宽度">
<
el-input v
-mod
el.number="form.width"></
el-input>
</
el-form
-item>
</
el-form>
<div slot="footer" class="dialog
-footer">
<
el-button @click="dialogVisible = false">取 消</
el-button>
<
el-button type="primary" @click="add
Column">确 定</
el-button>
</div>
</
el-dialog>
</template>
<script>
export default {
data() {
return {
dialogVisible: false,
form: {
lab
el: '',
prop: '',
width: ''
}
}
},
methods: {
add
Column() {
// 将表单
数据加入到
el-table-column的
数据源中
this.$emit('add
-column', this.form);
this.dialogVisible = false;
}
}
}
</script>
```
2. 点击确定按钮时，将表单中的
数据加入到
el-table-column的
数据源中：
```html
<template>
<div>
<
el-button type="primary" @click="dialogVisible = true">新增列</
el-button>
<
el-table :data="
tableData">
<!
-- 动态绑定
el-table-column -->
<
el-table-column v
-for="(
column, index) in
columns" :key="index" :lab
el="
column.lab
el" :prop="
column.prop" :width="
column.width"></
el-table-column>
</
el-table>
<
column-dialog :visible.sync="dialogVisible" @add
-column="add
Column"></
column-dialog>
</div>
</template>
<script>
import
ColumnDialog from './
ColumnDialog';
export default {
components: {
ColumnDialog
},
data() {
return {
dialogVisible: false,
columns: [
{
lab
el: '姓名',
prop: 'name',
width: 100
},
{
lab
el: '年龄',
prop: 'age',
width: 100
}
],
tableData: [
{
name: '张三',
age: 18
},
{
name: '李四',
age: 20
}
]
}
},
methods: {
add
Column(
column) {
// 将新增列加入到
columns中
this.
columns.push({
lab
el:
column.lab
el,
prop:
column.prop,
width:
column.width
});
}
}
}
</script>
```
3. 在
el-table中动态绑定
el-table-column，使新增的列能够显示出来。
通过在
el-table-column上使用v
-for指令，动态绑定
columns中的
数据，使新增的列能够被
el-table显示出来。
博客介绍了在Vue中对表格el-table-column数据翻译字段的方法。针对后台返回的1和0，需求是将其显示为已审核和未审核。通过使用:formatter = “stateFormat”，并在methods区编写相应函数，实现了页面显示已审核和未审核的效果。
扫一扫
2946
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
