table记录下

最新推荐文章于 2021-09-11 11:23:41 发布

Running_FE

最新推荐文章于 2021-09-11 11:23:41 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/Running_FE/article/details/115349309

版权

这是一个关于前端开发的示例，展示如何使用Vue.js和Element UI库创建一个可编辑的表格。表格包含项目、日预测金额、周预测金额等字段，并支持内部数据的递归展示与编辑。用户可以在特定列中输入数值，对于内部公司的金额进行直接编辑。

摘要由CSDN通过智能技术生成

效果如图

<table width="100%"
           align="center"
           cellpadding="0"
           cellspacing="0">
      <thead>
        <th v-for='(th, index) in thead'
            :key='index'>{{th.label}}</th>
      </thead>
      <tbody>
        <template v-for='td in tableData'>
          <tr class='bg'
              :key='td.id'>
            <td v-for='(th, index) in thead'
                :key='index'>
              {{td[th.prop]}}
            </td>
          </tr>
          <template v-if='td.children'>
            <tr v-for='childTd in td.children'
                :key='childTd.id'>
              <td v-for='(th, index) in thead'
                  :key='index'>
                <span v-if='th.prop == "project"'>{{childTd[th.prop]}}</span>
                <el-input v-else
                          type='number'
                          size='mini'
                          @mousewheel.native.prevent
                          v-model.number="childTd[th.prop]"></el-input>
              </td>
            </tr>
          </template>
        </template>
      </tbody>
    </table>


<script>
export default {
	thead:[
        {
          label: '项目',
          prop: 'project'
        },
        {
          label: '日预测金额',
          prop: 'day'
        },
        {
          label: '周预测金额',
          prop: 'week'
        },
        {
          label: '其中：内部公司（元）',
          prop: 'number'
        },
        {
          label: '备注',
          prop: 'remarks'
        },
      ],
      tableData:[
        {
          id: '1',
          project: '经营性收入',
          children: [{
            id: '1-2',
            project: '（1）气费回款'
          },
          {
            id: '1-3',
            project: '（2）建设费回款'
          }]
        },
        {
          id: '2',
          project: '内部往来流入',
          children: [{
            id: '2-2',
            project: '（1）内部往来收款'
          }]
        },
        {
          id: '3',
          project: '经营性支出',
          children: [
            {
              id: '3-1',
              project: '（1）气费采购'
            },
            {
              id: '3-2',
              project: '（2）物资采购'
            },
            {
              id: '3-3',
              project: '（3）工程施工'
            },
            {
              id: '3-4',
              project: '（4）运费采购'
            },
          ]
        },
        
      ]
}
<script>