elementui 展示列表模板_vue element-ui 实现表格列表动态展示

思路：

将所有列名存储在columns这个数组中，并通过动态更新该数组的内容来实现动态展示各列的目的

columns数组包含的内容格式如下：

// 字段header

this.columns.push({

label: 实际的字段名，比如id,

value: 实际的字段名，比如id,

key: Date.now()

});

代码全部如下：

关 闭

// 获取样本数据的请求

import {

getSampleDataUrl

} from '@/api/task/tasklist';

export default {

name: 'showDataSample',

props: ['visible'],// 父组件传来的可变量，用户控制 el-dialog的显示于隐藏

data() {

return {

columns: [],// 列名，如 id,name

gridData: [] // 结果, 如 1001，张三

};

},

created() {

console.log("in showDataSample ");

},

methods: {

cancelModal() {

// 关闭弹窗，触发父组件修改visible值，关闭 el-dialog控件

this.$emit('update:visible', false)

},

// 获取数据

getSampleData(dsId,tableName, columnList, headerList) {

this.columns = headerList;

console.output("dsId=" + dsId + ",tableName = " + tableName + ",columnList = " + JSON.stringify(columnList))

const data = getSampleDataUrl({

dsId: dsId,

tableName: tableName,

columnList: JSON.stringify(columnList)

});

data.then(res => {

if (res.success) {

var data = res.data;

data.forEach(item => {

console.log(item)

})

this.gridData = res.data;

} else {

this.$alert('获取数据源列表失败', '提示', {

confirmButtonText: '关闭'

})

}

}).catch(err => {

console.log(err)

})

},

openDialog() {

// 打开数据源DIV

console.log('openDialog');

},

handleClose(done) {

this.$confirm('确认关闭？')

.then(_ => {

this.cancelModal();

})

.catch(_ => {});

},

}

};