<template>
<el-form :model="ruleForm" :rules="rules" key="ruleForm" ref="ruleForm" label-width="130px">
<el-row>
<el-col :span="8">
<el-form-item class="w80" label="数据源:" prop="data">
<el-select v-model="ruleForm.data" placeholder="请选择数据源">
<el-option label="数据源1" value="sourceList1" />
<el-option label="数据源2" value="sourceList2" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item class="w80" label="数据表:" prop="data2">
<el-select v-model="ruleForm.data2" placeholder="请选择数据表">
<el-option label="数据表1" value="sourceList1" />
<el-option label="数据表2" value="sourceList2" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item class="w80" label="数据表:">
<el-table key="tableData" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="index" label="序号" width="50" align="center">
</el-table-column>
<el-table-column prop="date" label="字段名" align="center">
</el-table-column>
<el-table-column prop="date2" label="字段中文名" align="center">
</el-table-column>
<el-table-column prop="date3" label="字段类型" align="center">
</el-table-column>
<el-table-column prop="parameter" label="返回参数" align="center" :key="checkAll">
<template slot="header">
<el-checkbox size="mini" v-model="checkAll" @change="handleCheckAllChange">返回参数</el-checkbox>
</template>
<template slot-scope="scope">
<el-checkbox size="mini" v-model="scope.row.parameter" @change="handleChecked"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="parameter2" label="是否必填" align="center">
<template slot-scope="scope">
<el-checkbox size="mini" v-model="scope.row.parameter2"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="parameter3" label="请求参数" align="center">
<template slot-scope="scope">
<el-checkbox size="mini" v-model="scope.row.parameter3"></el-checkbox>
</template>
</el-table-column>
<el-table-column prop="format" label="显示格式" align="center">
<template slot-scope="scope">
<el-select size="mini" v-model="scope.row.format" placeholder="请选择数据表">
<el-option :label="item.label" :value="item.value" :key="i" v-for="(item,i) in formatList" />
</el-select>
</template>
</el-table-column>
<el-table-column prop="dictionaries" label="字典项" align="center">
<template slot-scope="scope">
<el-select size="mini" v-model="scope.row.dictionaries" placeholder="请选择数据表">
<el-option :label="item.label" :value="item.value" :key="i" v-for="(item,i) in dictionariesList" />
</el-select>
</template>
</el-table-column>
<el-table-column prop="operationType" label="操作类型" align="center">
<template slot-scope="scope">
<el-select size="mini" v-model="scope.row.operationType" placeholder="请选择数据表">
<el-option :label="item.label" :value="item.value" :key="i" v-for="(item,i) in operationTypeList" />
</el-select>
</template>
</el-table-column>
</el-table>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div class="step2-foot">
<div style="text-align: center">
<el-button @click="back">上一步</el-button>
<el-button type="primary" @click="submitForm('ruleForm')">下一步</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'paramConfig',
props: {},
components: {},
data() {
return {
ruleForm: {
multipleSelection: []
tableData: [{
date: 'XM',
date2: '王小虎',
date3: '字符型（string）'
}, {
date: 'XB',
date2: '姓名',
date3: '字符型（string）'
},],
operationTypeList: [],
dictionariesList: [],
formatList: [],
rules: {
data: { required: true, message: '请选择数据源', trigger: 'change' },
data2: { required: true, message: '请选择数据表', trigger: 'change' }
checkLen: 0,
checkAll: false
computed: {},
beforeMount() { },
mounted() { },
methods: {
handleCheckAllChange(val) {
console.log(val)
const newData = this.tableData.map(item => {
return {
...item,
parameter: val
this.tableData = newData
if (val) {
this.checkAll = true
this.checkLen = newData.length
} else {
this.checkAll = false
this.checkLen = 0
handleChecked(val) {
this.checkLen = val ? this.checkLen + 1 : this.checkLen - 1
this.checkAll = this.checkLen == this.tableData.length
handleSelectionChange(val) {
this.ruleForm.multipleSelection = val
back() {
this.$emit('back')
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
const params = {
isActive: this.isActive
this.$emit('next', params)
} else {
console.log('error submit!!')
return false
</script>
<style lang='scss' scoped>
</style>
备注：不要自己设置请求头类型，让浏览器自己解析，如果在main.js中配置了post参数序列化的可能会导致浏览器解析上传文件格式错误（415错误Unsupported Media Type）；请将此配置注释掉；
async uploadFile(params) {
// 可以在上传之前就行文件类型和大小处理
var formData = new FormData();
formData.append('annex', params.file);
2022/09/02更新：
下边网友发现有新的方案：https://github.com/guolaopi/element-plus-table-dragable-demo 有上网条件的可以直接去github下载。
没有上网条件的可以在这里下载已经更新。
说明：本人前端小白不是什么骗子（我有4.5k多分没啥毛用），之前没有现成的组件就用Vuedraggable来实现，功能实现了但是不太友好。
=======以下是之前的说明=====
原创亲测至少节约小白两天时间，本人前端小白搞了好几天才实现表格拖动排序。在网上找的（vue3+sortable.js根本跑不起来）网上好多例子在vue3下根据跑不起来于是，也没有对表格排序的例子。Vuedraggable 是基于并提供Sortable.js的所有功能。重用现有element-plus组件库。对于小白来说怎么在Vuedraggable里使用element组件提供了实际应用参考。table样式完全模拟了el-table组件样式。看官方文档两天也不如直接看一个完整的实例。
需要安装依赖：npm i -S vuedraggable@next
即可根据下标删除数组中对应的对象。
补充知识：vue-element-upload 文件上传打开选择文件弹框前进行提示或操作
在项目中使用文件上传功能时，需求是不能直接弹出弹框，要先二次确认或进行提示。引申开来，即可在打开选择文件弹框之前，做一系列操作。
实现思路在基于element-upload组件的基础上，再加一个按
table数据添加勾选属性itemCheck，默认为false
表头添加render函数，渲染el-checkbox，绑定chang事件
在change事件中处理table数据，给itemCheck重新赋值，改变行勾选状态
改变行勾选状态，处理表头全选、部分选中、取消全选状态
处理table数据
for (let val of data) {
val.itemCheck = false;
this.dataList = dat
先说一下我的场景：
就是在表格里面选择某种产品，然后把这些产品加入订阅单，点击订阅单，就出现下面的图片，默认所有的产品全选，我就给所有数据加了一个chenked为true的属性
遇到的问题：由于数据是从表格传过来的，然后点击发布渠道，发现控制台数据变了，但是视图并没有更新，如下图：我点击测试模型，控制台打印为false，但是视图就是不改变
原因：由于我传过来的数据是数组，如下图，数组中数据发生变化，vue是侦听不到的，但是重写的这几个数组的方法（比如splice()、pop、push等）修改的数组是可
创建表格 添加 @select-all=“selectAll” @select=“selectAnalysis” ref=“multipleTable”
<el-table @select-all="selectAll" ref="multipleTable" @select="selectAnalysis" v-loading="loadingAnalysis" style="margin-top: 10px" height="350px" :data="analysisData" border
用Element的组件Table表格，当使用树形数据再配合上多选框，如下：
会出现一种问题，点击左上方全选，只能够选中一级树节点，子节点无法被选中，如图所示：
想要实现点击全选就选中所有的表格，要另想办法，方法如下：
1、首先给table设置一个ref；
2、绑定一个@select-all方法；
3、定义一个变量，来识别全选框是否被选中，默认为未被选中；
checkedKeys: false,
4、@select-all绑定的方法如下，Element的Table表格中，select-all表示当用
