使用vue+elementUI编写一个移动端列表展示，要求顶部要有el-tab标签选择，分为商家查看与新增商家，点击商家查看的时候有表单展示数据并能对每一条数据进行编辑与锁定，新增商家能够以form表单进行添加

好的，这个需求可以分为以下几个步骤实现： 1. 安装Vue和Element UI，并在Vue中引入Element UI组件库。 ```bash npm install vue npm install element-ui -S ``` 2. 在Vue中创建一个组件，用于展示商家列表。在这个组件中，使用el-tab标签，分别展示商家查看和新增商家两个页面。 3. 在商家查看页面中，使用表格展示商家列表数据。每一行数据应该包含商家名称、联系人、联系电话等信息。可以使用el-table组件来实现表格的展示。 4. 给每一行数据添加编辑和锁定功能。可以在表格中添加“编辑”和“锁定”两个按钮，点击后可以对对应的商家数据进行编辑和锁定操作。 5. 在新增商家页面中，使用el-form组件展示表单，包含商家名称、联系人、联系电话等输入框。可以在表单中添加“提交”按钮，点击后可以将表单数据提交到后台进行保存。 下面是一个简单的实现方案： ```html <template> <div> <el-tabs v-model="activeTab"> <el-tab-pane label="商家查看" name="view"> <el-table :data="tableData"> <el-table-column prop="name" label="商家名称"></el-table-column> <el-table-column prop="contact" label="联系人"></el-table-column> <<el-table-column prop="phone" label="联系电话"></el-table-column> <el-table-column label="操作"> <template slot-scope="scope"> <el-button size="small" @click="edit(scope.row)">编辑</el-button> <el-button size="small" @click="lock(scope.row)">锁定</el-button> </template> </el-table-column> </el-table> </el-tab-pane> <el-tab-pane label="新增商家" name="add"> <el-form :model="form" label-width="80px"> <el-form-item label="商家名称"> <el-input v-model="form.name"></el-input> </el-form-item> <el-form-item label="联系人"> <el-input v-model="form.contact"></el-input> </el-form-item> <el-form-item label="联系电话"> <el-input v-model="form.phone"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </el-tab-pane> </el-tabs> </div> </template> <script> import { ElTable, ElTableColumn, ElButton, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput } from 'element-ui'; export default { components: { ElTable, ElTableColumn, ElButton, ElTabs, ElTabPane, ElForm, ElFormItem, ElInput }, data() { return { activeTab: 'view', tableData: [ { name: '商家1', contact: '张三', phone: '12345678901' }, { name: '商家2', contact: '李四', phone: '12345678902' }, { name: '商家3', contact: '王五', phone: '12345678903' } ], form: { name: '', contact: '', phone: '' } }; }, methods: { edit(row) { // 编辑商家信息 }, lock(row) { // 锁定商家 }, submitForm() { // 提交表单数据 } } }; </script> ```