vue 做后台管理系统2维数组表单（动态渲染可编辑单元格的Table）_vue二维数组怎么渲染到表格里

<template>

<!-- 广播播放优先级配置管理 -->

<div class="staple">

<div class="listfile">

<Row>

<Col span="24">广播播放优先级配置管理</Col>

</Row>

<Table border ref="selection" :columns="historyColumns" :data="historyData" height="500">

<!-- <Table border ref="selection" :columns="historyColumns" :data="historyData" height="500" id="tips" v-on:mouseenter="visible" @mouseleave="invisible"> -->

<span v-show="seen">123</span>

</Table>

<div slot="footer" style="margin-top:10px;">

<Row :gutter="20" type="flex" justify="end">

<Col span="2">

<Button type="primary" long @click="handleSave()">保存</Button>

</Col>

<Col span="2">

<Button long @click="cancelAdd()">取消</Button>

</Col>

</Row>

</div>

</div>

</div>

</template>



<script>

import Cookies from "js-cookie";

export default {

// el:"#tips",

data() {

const letter = this.$store.state.parameter.deserve; //字典

return {

seen: false,

priorityType: letter.M407, //优先级类型(数据字典M407)

broadcastinfoType: letter.M408, //广播信息类型(数据字典M408)

historyColumns: [

{ title: "#", key: "key", align: "center" },

{

title: "优先级类型A",key: "priorityType",align: "center",

render: (h, params) => {

return h("Input", {

props: {

// type: 'primary',

placeholder: "请输入...",

value: params.row.priorityType

}

}

// params.row.priorityType

);

}

},

{ title: "广播信息类型B",key: "broadcastinfoType",align: "center",

render: (h, params) => {

return h("Input", {

props: {

placeholder: "请输入...",

value: params.row.broadcastinfoType

}

});

}

}

],

historyData: [],

record: [], // 修改后的值

originData: [], // 存放接口数据的

list:[], // 数据库--初始化

// 提交的变量

editAll: {

priorityInfoList: []

}

};

},

methods: {

initSql() {

// 根据 字典 补全数据库数据

let list = []; // 全部的数据 的初始值 level 都为 0

this.priorityType.map( v => {

this.broadcastinfoType.map( item => {

list.push({

broadcastinfoType: item.itemValue,

priorityType: v.itemValue,

level: 0,

lastmodifytime: "2019-03-25 00:00:00",

reamrk: "123456",

createuserid:this.$store.state.user.userId,

createusername: this.$store.state.user.userName,

})

})

})

// console.log("list:",list);

// 2 调一下 接口 得到

// 查询所有

this.$axios({

method: "get",

url: this.baseURL + "/priority/PriorityInfo/list_All",

})

.then(res => {

// console.log("接口：", res.data);

this.originData = res.data;

// console.log("this.originData：", this.originData);

// 3 把接口的值存在list 里面

list.map(v => {

this.originData.map(item => {

if (v.broadcastinfoType === item.broadcastinfoType && v.priorityType === item.priorityType) {

v.level = item.level

}

})

})

})

.catch(error => {});

// 4 发送请求给后台 把list 传过去 调保存接口

this.editAll.priorityInfoList = list;

this.$axios({

// 修改优先级信息

method: "post",

data: this.editAll,

headers: { "Content-Type": "application/json" },

url: this.baseURL + "/priority/PriorityInfo/update_Priority "

})

.then(res => {

// console.log("000000:",res.data);

})

.catch(error => {});

// 5 重新调查询接口

this.search_all();

},

// 鼠标移入移出事件

// visible:function(){

//  this.seen = true;

// },

// invisible:function(){

//  this.seen = false;

// },

// 查询所有

search_all() {

this.$axios({

method: "get",