目的：
减少重复工作、简化开发速度
案例：
1.设置一个对话框：
<el-dialog width="50%" top="60px" :title='dialogTitle' :visible.sync="dialogVisible" :show-close="false" :append-to-body="false" :close-on-click-modal='false' :lock-scroll="false" > 111 </el-dialog>
2.抽离表单：
<template>
<div>
<el-form
:model="form"
:rules="rules"
ref="ruleForm"
label-width="120px"
>
<el-form-item
label="中文名"
prop="name">
<template slot="label">
<span>
<span>特征中文名</span>
<el-tooltip
content="同一业务下'中文名'不可重名"
placement="bottom"><i class="fa fa-info-circle"/>
</el-tooltip>
</span>
</template>
<el-input
v-model="form.name"
placeholder="请输入中文名"/>
</el-form-item>
<el-form-item>
<span class="form-item-submit">
<el-button
@click="cancelForm">取消</el-button>
<el-button
type="primary"
:loading="loadSubmit"
@click="submitForm">确定</el-button>
</span>
</el-form-item>
</el-form>
<!--嵌套的对话框-->
<el-dialog
title="特征模板列表"
width="50%"
top="60px"
:visible.sync="dialogVisibleNest"
:append-to-body="true"
:show-close="false"
:close-on-click-modal='false'
:lock-scroll="false"
>
<div>222
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props: {// 需要的参数统一传过来
formInfo: {
type: Object,
default () {
return {
isEdit: false, // 新建与编辑
allName: [],
form: {
name: ''
}
}
}
}
},
data () {
const validateName = (rule, value, callback) => {
if (value) {
const rtx = /^[\u4E00-\u9FA5a-zA-Z0-9_]+$/
if (!value.match(rtx)) {
callback(new Error('只允许中英文、数字、下划线'))
} else if (this.formInfo.allName.indexOf(value) !== -1) {
callback(new Error('该命名已存在'))
} else {
callback()
}
} else {
callback(new Error('不能为空'))
}
}
const validateType = (rule, value, callback) => {
if (value) {
const rtx = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/
if (!value.match(rtx)) {
callback(new Error('字母开头，允许5-16字节，允许字母数字下划线'))
} else if (this.formInfo.allName.indexOf(value) !== -1) {
callback(new Error('该命名已存在'))
} else {
callback()
}
} else {
callback(new Error('不能为空'))
}
}
// const validatePass = (rule, value, callback) => {
// if (value === '') {
// callback(new Error('不可为空'))
// } else {
// let result = this.removeStrNotes(value) // 去除注释
// if (typeof result === 'string') {
// try {
// let obj = JSON.parse(result) // 转换成json对象
// if (typeof obj === 'object' && obj) {
// callback()
// } else {
// callback(new Error('json格式有误'))
// }
// } catch (e) {
// callback(new Error(e))
// }
// } else {
// callback(new Error('json格式有误'))
// }
// }
// }
return {
form: {
name: '',
type: '',
user: '',
checked: 0
},
rules: {
name: [
{ required: true, validator: validateName, trigger: 'blur' }
],
type: [
{ required: true, validator: validateType, trigger: 'blur' }
],
checked: [
{ required: true, message: '请选择是否使用模板', trigger: 'change' }
],
user: [// 多选是数组
{ required: false, type: 'array', message: '请输入关键字，匹配特征关系人,可多选', trigger: 'change' }
]
},
dialogVisibleNest: false, // 查看嵌套的对话框
loadSubmit: false // 提交
}
},
watch: {
'formInfo': {
immediate: true,
handler (val) { // 初始化
console.log(val, '初始化')
if (!val.isEdit) {
this.allName = val.allName
this.form = {
name: '',
}
} else{
this.allName = []
this.form = val.form
}
this.$nextTick(function () {
// this.$refs['ruleForm'].resetFields()// 清空表单内容
this.$refs['ruleForm'].clearValidate()// 清空报错
this.$refs['inputFocus'].$el.querySelector('input').focus()
})
}
}
},
methods: {
submitForm () {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
this.$emit('form-change', this.form, this.formInfo.type)// 回调：成功提交
}
})
},
cancelForm () {
this.$emit('form-change')// 回调：关闭对话框
this.$refs['ruleForm'].resetFields()// 清空表单内容
this.$refs['ruleForm'].clearValidate()// 清空报错
}
}
}
</script>
【实例】：可编辑的表格：对话框形式+下拉选项+表格内容编辑
<template>
<div>
<el-table
ref="multipleTable"
:data="tableData"
border
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column label="名称(弹框编辑)" align="center" prop="name">
<template slot-scope="scope">
<editRowDialog :allName="allName" :scope="scope" @dialog-change="dialogChange"></editRowDialog>
</template>
</el-table-column>
<el-table-column label="类型(点击切换)" align="center" prop="type">
<template slot-scope="scope">
<editRowSelect :options="options" :scope="scope" @select-change="selectChange"></editRowSelect>
</template>
</el-table-column>
<el-table-column label="描述(点击编辑)" align="center" prop="desc">
<template slot-scope="scope">
<editRowInput :scope="scope" @input-change="inputChange"></editRowInput>
</template>
</el-table-column>
</el-table>
<el-button @click="handleCheck">手动选中</el-button>
</div>
</template>
<script>
import editRowDialog from './editRowDialog'
import editRowSelect from './editRowSelect'
import editRowInput from './editRowInput'
export default {
components:{
editRowDialog,
editRowSelect,
editRowInput,
},
data () {
return {
saveFlag:false,
options: ['int', 'string', 'number'],
tableData: [{
name:'a',
type:'int',
desc:0,
}],
}
},
computed: {
allName () {
return this.tableData.map(item =>item.name)
}
},
methods: {
handleSelectionChange (val) {
console.log(val,"全选");
},
// 手动触发
handleCheck () {
const rows = [this.tableData[0]]
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
// 抽离编辑的组件
dialogChange (val,index) {
this.$message.success("修改成功")
this.tableData[index].name = val.name
},
selectChange (val,index) {
this.$message.success("修改成功")
this.tableData[index].type = val
},
inputChange (val,index) {
this.$message.success("修改成功")
// this.tableData[index].desc = val
this.tableData[index].name = val
}
}
}
</script>
1.新建或重命名：对话框或表格内操作表单
<template>
<div @click.self="dialogVisible = true">
<span>
{{scope.row.name}}
<i class="el-icon-edit" />
</span>
<el-dialog
style="text-align: left;"
title="重命名："
width="30%"
:visible.sync="dialogVisible"
:show-close="false"
:append-to-body="false"
:close-on-click-modal="false"
:lock-scroll="false"
>
<newEditForm :dialogVisible="dialogVisible" :data="data" @form-call-back="formCallBack" />
</el-dialog>
</div>
</template>
<script>
import newEditForm from './newEditForm'
export default {
components: {
newEditForm
},
props: {
scope: {
type: Object,
default(){
return {
$index:0,
row:{name:''}
}
}
},
allName: {
type: Array,
default(){
return []
}
},
isEdit: {
type: Boolean,
default: false
}
},
computed:{
data(){
return {
isEdit: this.isEdit,
allName: this.allName,
form: {
name: this.scope.row.name
},
}
}
},
data () {
return {
dialogVisible: false,
}
},
methods: {
formCallBack (val) {
console.log(val,"提交或取消");
if(val && val.name){
this.$emit('dialog-change', val, this.scope.$index)
}else{
this.$message("已取消修改")
}
this.dialogVisible = false
}
}
}
</script>
设置了对话框的话，把表单抽离：
<template>
<div>
<el-form
:model="form"
:rules="rules"
ref="ruleForm"
label-position="left"
label-width="80px"
@submit.native.prevent
@keyup.enter.native="submitForm('ruleForm')"
>
<el-form-item
label="画布名："
prop="name">
<el-input
placeholder="请输入画布名"
clearable
v-model="form.name"
ref="inputFocus"
spellcheck="false"/>
</el-form-item>
<el-form-item>
<span class="form-item-submit">
<el-button
@click="cancelForm">取消</el-button>
<el-button
type="primary"
:loading="loadSubmit"
@click="submitForm('ruleForm')">确定</el-button>
</span>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
props: {
dialogVisible:{
type:Boolean,
default:false
},
data: {
type: Object,
default () {
return {
isEdit:false,
allName: [],
form: {
name: ''
}
}
}
}
},
data () {
const validateName = (rule, value, callback) => {
if (value) {
const rtx = /^[\u4E00-\u9FA5a-zA-Z0-9_]+$/
if (!value.match(rtx)) {
callback(new Error('只允许中英文、数字、下划线'))
} else if (this.allName.indexOf(value) !== -1) {
callback(new Error('该命名已存在'))
} else if (this.oldName === value) {
callback(new Error('该命名未修改'))
} else {
callback()
}
} else {
callback(new Error('不能为空'))
}
}
return {
allName:[],
oldName:'',
form: {
name: '',
},
rules: {
name: [
{ required: true, validator: validateName, trigger: 'blur' }
]
},
loadSubmit: false // 提交
}
},
watch: {
'dialogVisible': {
immediate: true,
// deep:true,
handler (val) { // 初始化
if(val){
this.$nextTick(function () {
// this.$refs['ruleForm'].resetFields()// 清空表单内容
this.$refs['ruleForm'].clearValidate()// 清空报错
this.$refs['inputFocus'].$el.querySelector('input').focus()
})
if (this.data && this.data.isEdit) { //新建
this.allName = this.data.allName
this.form = {name: ''}
} else { // 编辑：默认
this.allName = []
this.oldName = this.form.name = this.data.form.name
}
}
}
},
'data': {
immediate: false,
// deep:true,
handler (val) {
if (val && val.isEdit) { //新建
this.allName = val.allName
this.form = {name: ''}
} else { // 编辑：默认
this.allName = []
this.oldName = this.form.name = val.form.name
}
}
},
},
methods: {
submitForm () {
this.$refs['ruleForm'].validate((valid) => {
if (valid) {
this.$emit('form-call-back', this.form)// 回调：成功提交
this.$refs['ruleForm'].resetFields()// 清空表单内容
this.$refs['ruleForm'].clearValidate()// 清空报错
}else{
return
}
})
},
cancelForm () {
this.$emit('form-call-back')// 回调：关闭对话框
this.$refs['ruleForm'].resetFields()// 清空表单内容
this.$refs['ruleForm'].clearValidate()// 清空报错
}
}
}
</script>
<!-- 不校验去除低栏边距 -->
<style scoped>
.form-item-bottom{
margin-bottom: 0;
}
.form-item-submit{
margin-top: 20px;
float: right
}
</style>
2.表格内编辑，不需要进行表单校验，即：未修改直接提示，不拦截
<template>
<div @click="getInputFocus(scope.row.name)">
<span v-if="!isEdit">
{{scope.row.name}}
<i class="el-icon-edit"/>
</span>
<el-input
v-else
:ref="`focusInput${scope.$index}`"
v-model="inputVal"
@blur="blurChange(inputVal)"
spellcheck="false"
/>
</div>
</template>
<script>
export default {
props: {
scope: {
type: Object,
default(){
return {
$index:0,
row:{name:''}
}
}
}
},
data () {
return {
isEdit:false,
oldName:'',
inputVal:''
}
},
methods:{
getInputFocus(val){ // 获取焦点
this.oldName = this.inputVal = val
this.isEdit = true
this.$nextTick(() => {
this.$refs[`focusInput${this.scope.$index}`].focus()
})
},
blurChange(val){ // 失去焦点
if(val !== this.oldName){
this.$emit('input-change', val,this.scope.$index)
}else{
this.$message.warning("内容未修改")
}
this.isEdit = false
}
}
}
</script>
3.表格内操作：下拉选项
<template>
<div @click="getSelectFocus(scope.row.type)">
<span v-if="!isEdit">
{{scope.row.type}}
<i class="el-icon-edit"/>
</span>
<el-select
v-else
:ref="`toFoucus${scope.$index}`"
automatic-dropdown
v-model="selectedVal"
placeholder="请选择"
style="text-align:center;width: 100%"
@change='selectChange'
@visible-change='visibleChange'
>
<el-option v-for="item in options" :key="item" :label="item" :value="item" />
</el-select>
</div>
</template>
<script>
export default {
props: {
scope: {
type: Object,
default(){
return {
$index:0,
row:{type:'int'}
}
}
},
options: {
type: Array,
default () {
return []
}
}
},
data () {
return {
isEdit:false,
selectedOld: '',
selectedVal: ''
}
},
methods:{
getSelectFocus(val){ // 获取焦点
this.selectedOld = this.selectedVal = val
this.isEdit = true
this.$nextTick(() => {
this.$refs[`toFoucus${this.scope.$index}`].focus()
})
},
selectChange(val){ //提交
this.$emit('select-change', val,this.scope.$index)
},
visibleChange(val){ // 失去焦点
if(!val){
if(this.selectedOld === this.selectedVal){
this.$message.warning("内容未修改")
}
this.isEdit = false
}
}
}
}
</script>
其他：新增一行、删除一行的校验与重置按钮（禁止添加或校验重名）
最外层的结构：
<template>
<el-form :rules="rules" :model="form" ref="rulesForm">
<el-form-item prop="tableData">
<dragTableDialog
:table-data="form.tableData"
:drop-col="column"
tab-show
dialog-title="编辑"
@save-drag-table="saveDragTable"
/>
</el-form-item>
</el-form>
</template>
<script>
import dragTableDialog from './module-components/formTable/dragTableDialog'
export default {
components: {
dragTableDialog
},
data () {
return {
rules: {
tableData: { type: 'array', required: true, message: '输出列表不可为空', trigger: 'blur' }
},
form: {
tableData: []
},
column: [
{
default: '',
label: '字段',
prop: 'field_name'
},
{
default: 'string',
label: '类型',
prop: 'field_type'
},
{
default: '',
label: '描述',
prop: 'field_desc'
}
]
}
},
methods: {
saveDragTable (val) {
this.form.tableData = val
if(val.length===0){
this.$refs['rulesForm'].validateField('tableData') //校验某个字段
}else{
// this.$refs['copyForm'].resetFields()// 清空表单内容
this.$refs['rulesForm'].clearValidate()// 清空报错
}
},
}
}
</script>
表格与字符串的切换：
<!--可拖拽的表格：表格内容+行参数+按钮名称（对话框标题） --> <template> <div> <el-button type="primary" @click="showDialog">{{ dialogTitle }}</el-button> <CommonTable style="marginTop:10px" :table-data="tableDataBeigin" :table-column="dropCol" /> <el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" append-to-body show-close :before-close="beforeClose" :title="dialogTitle" width="40%" > <div v-if="!tabShow" style="margin-top:-20px;"> <dragTableForm :table-data="tableDataDialog" :table-column="dropCol" :save-disabled="saveDisabled" @save-call-back="saveCallBack" @save-data-back="saveDataBack" /> </div> <el-tabs v-else @tab-click="handleClickTab" style="margin-top:-20px;" v-model="activeName" type="card" > <el-tab-pane label="表格编辑模式" name="table"> <dragTableForm :size="size" :table-data="tableDataDialog" :drop-col="dropCol" :save-disabled="saveDisabled" @save-call-back="saveCallBack" @save-data-back="saveDataBack" /> </el-tab-pane> <el-tab-pane label="文本编辑模式" name="txt"> <el-input @change="inputChange" v-model="strSplit" type="textarea" :rows="6" placeholder="例：a,int,描述a，类型int。" spellcheck="false" /> <h4 style="margin:5px 0">注意：</h4> <ol style="text-align:left"> <li>可将导出的csv文件内容，直接复制过来使用，若有数据类型且不符合规范，转换后默认为string；</li> <li>手动编辑时，注意分隔符为英文逗号(第3个逗号后面的内容合并到最后一列)，新的一行用Enter键换行。</li> </ol> </el-tab-pane> </el-tabs> <!--保存操作 --> <span slot="footer" class="dialog-footer"> <el-button :size="size" type="primary" @click="submitDialog" :disabled="saveDisabled">保存</el-button> </span> </el-dialog> </div> </template> <script> import _ from 'lodash' import CommonTable from './commonTable' import dragTableForm from './dragTableForm' export default { components: { CommonTable, dragTableForm }, props: { 'size': { type: String, default: 'mini' }, 'tableData': { type: Array, default () { return [] } }, 'dropCol': { type: Array, default () { return [ { default: '', label: '字段', prop: 'field_name' }, { default: 'string', label: '类型', prop: 'field_type' }, { default: '', label: '描述', prop: 'field_desc' } ] } }, 'dialogTitle': { type: String, default: '新建' }, 'tabShow': { type: Boolean, default: false } }, data () { return { strSplit: '', activeName: 'table', dialogVisible: false, saveDisabled: false, tableDataBeigin: [], tableDataDialog: [] } }, watch: { 'tableData': { immediate: true, handler (val) { const tableData = [] val.forEach((item, index) => { const obj = {} obj.id = index this.dropCol.forEach(e => { obj[e.prop] = item[e.prop] }) tableData.push(obj) }) console.log("监听提交"); this.tableDataBeigin = tableData this.tableDataDialog = _.cloneDeep(tableData) } } }, methods: { showDialog () { if (this.activeName === 'txt') { let str = '' this.tableDataDialog.forEach(item => { delete item.id str += Object.values(item) + '\n' }) this.strSplit = str } this.dialogVisible = true }, beforeClose () { const tableData = [] this.tableData.forEach((item, index) => { const obj = {} obj.id = index this.dropCol.forEach(e => { obj[e.prop] = item[e.prop] }) tableData.push(obj) }) this.tableDataDialog = _.cloneDeep(tableData) this.dialogVisible = false this.saveDisabled = false }, findStrIndex (str, cha, num) { var x = str.indexOf(cha) for (var i = 0; i < num; i++) { x = str.indexOf(cha, x + 1) } return x }, handleClickTab (tab, event) { if (tab.name === 'txt') { let str = '' this.tableDataDialog.forEach(item => { delete item.id str += Object.values(item) + '\n' }) this.strSplit = str } else { const array = this.strSplit.split('\n') if (!array[array.length - 1]) { array.pop() } const tableDataDialog = [] array.forEach((item, index) => { const allIndex = this.findStrIndex(item, ',', 1) let array2 = [] if (item.split(',').length > 3) { array2 = item.substring(0, allIndex).split(',') array2.push(item.substring(allIndex + 1)) } else { if (item.split(',').length === 1) { array2 = [item, this.dropCol[1].prop === 'field_type' ? 'string' : '', ''] } else { array2 = item.split(',') } } const obj = {} array2.forEach((e, i) => { obj.id = index if (this.dropCol[i].prop === 'field_type') { const options = ['tinyint', 'smallint', 'int', 'bigint', 'boolean', 'float', 'double', 'string'] obj[this.dropCol[i].prop] = options.indexOf(array2[i]) !== -1 ? array2[i] : 'string' } else if (this.dropCol[i].prop === 'field_key') { const keyOptions = ['qq', 'area', 'roleid', 'os', 'commid', 'openid', 'null'] obj[this.dropCol[i].prop] = keyOptions.indexOf(array2[i]) !== -1 ? array2[i] : 'null' } else { obj[this.dropCol[i].prop] = array2[i] ? array2[i] : '' } }) tableDataDialog.push(obj) }) this.tableDataDialog = tableDataDialog } }, saveCallBack (disabled) { this.saveDisabled = disabled }, saveDataBack (data) { this.tableDataDialog = data }, inputChange (val) { // 转换+校验 const array = this.strSplit.split('\n') if (!array[array.length - 1]) { array.pop() } const tableDataDialog = [] array.forEach((item, index) => { const allIndex = this.findStrIndex(item, ',', 1) let array2 = [] if (item.split(',').length > 3) { array2 = item.substring(0, allIndex).split(',') array2.push(item.substring(allIndex + 1)) } else { if (item.split(',').length === 1) { array2 = [item, this.dropCol[1].prop === 'field_type' ? 'string' : '', ''] } else { array2 = item.split(',') } } const obj = {} array2.forEach((e, i) => { obj.id = index if (this.dropCol[i].prop === 'field_type') { const options = ['tinyint', 'smallint', 'int', 'bigint', 'boolean', 'float', 'double', 'string'] obj[this.dropCol[i].prop] = options.indexOf(array2[i]) !== -1 ? array2[i] : 'string' } else if (this.dropCol[i].prop === 'field_key') { const keyOptions = ['qq', 'area', 'roleid', 'os', 'commid', 'openid', 'null'] obj[this.dropCol[i].prop] = keyOptions.indexOf(array2[i]) !== -1 ? array2[i] : 'null' } else { obj[this.dropCol[i].prop] = array2[i] ? array2[i] : '' } }) tableDataDialog.push(obj) }) this.tableDataDialog = tableDataDialog //校验 const tableData = [] this.tableDataDialog.forEach((item, index) => { const obj = {} this.dropCol.forEach(e => { obj[e.prop] = item[e.prop] }) tableData.push(obj) }) const arr = tableData.map(item => item[this.dropCol[0].prop]) if ((new Set(arr)).size !== arr.length) { this.$message.warning(this.dropCol[0].label + '不可重名') } }, submitDialog () { console.log("提交"); const tableData = [] this.tableDataDialog.forEach((item, index) => { const obj = {} this.dropCol.forEach(e => { obj[e.prop] = item[e.prop] }) tableData.push(obj) }) this.tableDataBeigin = tableData const arr = tableData.map(item => item[this.dropCol[0].prop]) if ((new Set(arr)).size !== arr.length) { this.$message.warning(this.dropCol[0].label + '不可重名') } else { this.$emit('save-drag-table', tableData) this.dialogVisible = false } } } } </script>
设置公共组件：el-table
/*** * 通用的table展示 * @param {Array} tableData * @param {Array} tableColumn * @return {Number/String} height(参考element) * @return {String} size(参考element) * @return {Boolean} stripe 默认显示 * @return {Boolean} sortable 默认显示 * @return {Boolean} loading * @return {Function} filterChange * @return {Function / String} tableRowClassName 底色 * @return {String} slot 插入的位置：header、footer * */ <template> <div> <el-table ref="commonTable" :data="tableData" :size="size" :stripe="stripe" border highlight-current-row v-loading="loading" :row-class-name="tableRowClassName" @filter-change="filterChange" @selection-change="handleSelectionChange" :row-key="rowKey" > <!--自定义插入--> <slot name="header" /> <el-table-column v-for="(item, index) in tableColumn" :key="`key_${index}`" :prop="item.prop" :label="item.label" show-overflow-tooltip :sortable="sortable" align="center" > <template slot-scope="scope"> <div v-if="tableColumn[index].prop === 'field_key'"> <span>{{ keyOptionsObj[scope.row.field_key] || '-空-' }}</span> </div> <div v-else> <span>{{ scope.row[tableColumn[index].prop] || '-空-' }}</span> </div> </template> </el-table-column> <!--自定义插入--> <slot name="footer" /> </el-table> </div> </template> <script> export default { props: { tableData: { type: Array, default () { return [] } }, tableColumn: { type: Array, default () { return [ { default: '', label: '字段名称', prop: 'field_name' }, { default: 'string', label: '字段类型', prop: 'field_type' }, { default: '', label: '字段描述', prop: 'field_desc' } ] } }, size: { type: String, default: 'mini' }, sortable: { type: Boolean, default: true }, stripe: { type: Boolean, default: true }, loading: { type: Boolean, default: false }, filterChange: { type: Function, default () { return '' } }, tableRowClassName: { type: Function, default () { return '' } }, rowKey: { type: String, default: '' }, initSelection: { type: Boolean, default: false } }, data () { return { keyOptionsObj: { qq: 'QQ号', area: '大区ID', roleid: '角色ID', os: '手机操作系统', commid: '微信Commid', openid: 'Open ID', null: '不关联' } } }, watch: { initSelection: { immediate: true, handler (val) { if (val) { this.$nextTick(() => { this.$refs.commonTable.clearSelection() }) } } } }, methods: { handleSelectionChange (val) { this.$emit('handleSelectionChange', val) } } } </script>
设置可拖拽的表格：
<template>
<div>
<el-button
:size="size"
type="primary"
@click="addRow"
style="margin-bottom: 10px"
:disabled="disabledAdd"
>新增一行</el-button>
<el-form :model="form" :rules="rules" ref="form">
<el-table
border
:size="size"
id="dragTable_sql"
:row-key="getRowKeys"
:data="form.tableData"
style="width: 100%;"
>
<!-- 拖拽图标 -->
<el-table-column width="40" align="center">
<template>
<i class="el-icon-rank" style="font-size:large;cursor:grab" />
</template>
</el-table-column>
<!-- 输入选择 -->
<el-table-column
v-for="(item, index) in tableColumn"
:key="index"
:prop="item.prop"
:label="item.label"
align="center"
>
<template slot-scope="scope">
<el-form-item
v-if="index===0"
:size="size"
:prop="`tableData.${scope.$index}.${item.prop}`"
:rules="rules[item.prop]"
>
<el-input
v-focus
clearable
v-model="scope.row[item.prop]"
:placeholder="`请输入${item.label}`"
@change="inputChange"
@clear="inputChange"
/>
</el-form-item>
<el-form-item v-else-if="item.prop === 'field_type'" :size="size">
<el-select
@change="saveChange"
:size="size"
v-model="scope.row[item.prop]"
:placeholder="'请选择'+item.label"
>
<el-option
v-for="item in options"
:key="item"
:label="item"
:value="item"
style="text-align: center;"
/>
</el-select>
</el-form-item>
<el-form-item v-else-if="item.prop === 'field_key'" :size="size">
<el-select
clearable
v-model="scope.row[item.prop]"
:placeholder="'请选择'+item.label"
@change="saveChange"
>
<el-option
style="text-align: center;"
v-for="(item,index) in keyOptions"
:key="index"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item v-else :size="size">
<el-input
clearable
v-model="scope.row[item.prop]"
:placeholder="`请输入${item.label}`"
@change="saveChange"
@clear="saveChange"
/>
</el-form-item>
</template>
</el-table-column>
<!--操作 -->
<el-table-column width="80" align="center" label="操作" fixed="right">
<template slot-scope="scope">
<el-button :size="size" type="danger" @click="deleteRow(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-form>
<el-link type="danger" v-show="isRepeatName">{{tableColumn[0].label}}命名已存在！</el-link>
</div>
</template>
<script>
import _ from 'lodash'
import Sortable from 'sortablejs'
export default {
directives: {
focus: {
inserted: function (el) {
el.querySelector('input').focus()
}
}
},
props: {
'size': {
type: String,
default: 'mini'
},
'tableData': {
type: Array,
default () {
return []
}
},
'tableColumn': {
type: Array,
default () {
return [
{
default: '',
label: '字段',
prop: 'field_name'
},
{
default: 'string',
label: '类型',
prop: 'field_type'
},
{
default: '',
label: '描述',
prop: 'field_desc'
}
]
}
}
},
watch: {
'form.tableData': {
immediate: false,
handler (val) {
this.$emit('save-data-back', val)
if (val.length > 0) {
const fieldName = val.map(item => item[this.tableColumn[0].prop])
this.isRepeatName = this.isRepeat(fieldName)
val.forEach(item => {
if (!item[this.tableColumn[0].prop]) {// 只有有空就禁止提交
this.disabledAdd = true
this.$emit('save-call-back', true)
} else {
this.disabledAdd = false
this.$emit('save-call-back', false)
}
})
if (this.isRepeatName) { // 有重复值
this.disabledAdd = true
this.$emit('save-call-back', true)
}
}
}
},
'tableData': {
immediate: true,
handler (val) {
this.$nextTick(function () {
this.rowDropDialog()
})
if(val.length > 0){
this.form.tableData = val
}
}
}
},
computed: {
rules () {
const rules = {}
this.tableColumn.forEach((item, index) => {
rules[item.prop] = [
{ required: true, message: '请输入' + item.label, trigger: 'blur' },
{ pattern: /^[a-zA-Z][a-zA-Z0-9_]*$/, message: '须字母开头，不含特殊符号', trigger: 'blur' },
]
})
return rules
}
},
data () {
return {
getRowKeys (row) {
return row.id
},
form: {
tableData: []
},
fieldName: [],
disabledAdd: false,
isRepeatName: false,
options: [
'tinyint',
'smallint',
'int',
'bigint',
'boolean',
'float',
'double',
'string'
],
keyOptions: [
{ value: 'qq', label: 'QQ号' },
{ value: 'area', label: '大区ID' },
{ value: 'roleid', label: '角色ID' },
{ value: 'os', label: '手机操作系统' },
{ value: 'commid', label: '微信Commid' },
{ value: 'openid', label: 'Open ID' },
{ value: 'null', label: '不关联' }
]
}
},
methods: {
rowDropDialog () {
const tbody = document.querySelector('#dragTable_sql tbody')
const _this = this
Sortable.create(tbody, {
handle: '.el-icon-rank',
animation: 150,
onEnd ({ newIndex, oldIndex }) {
const currRow = _this.form.tableData.splice(oldIndex, 1)[0]
_this.form.tableData.splice(newIndex, 0, currRow)
}
})
},
inputChange (val) {
if (val) { //必要字段更新
this.disabledAdd = this.fieldName.indexOf(val) !== -1
this.isRepeatName = this.fieldName.indexOf(val) !== -1
this.$emit('save-call-back', this.disabledAdd)
this.$emit('save-data-back', this.form.tableData)
} else {
this.$refs['form'].validate(valid => {
if (valid) {
//清除不计重复
this.$emit('save-data-back', this.form.tableData)
} else {
this.disabledAdd = true
this.$emit('save-call-back', true)
return valid
}
});
}
},
saveChange () {
this.$emit('save-data-back', this.form.tableData)
},
addRow () {
this.$refs['form'].validate((valid) => {
if (valid) {
// 1.读取已有命名
if (this.form.tableData.length > 0) {
this.fieldName = this.form.tableData.map(item => item[this.tableColumn[0].prop])
}
// 2.添加一行：id++1
const tableRowKey = this.tableColumn.map(item => item.prop)
const tableRowVal = this.tableColumn.map(item => item.default)
const tableRow = _.zipObject(tableRowKey, tableRowVal) // 映射
tableRow.id = _.uniqueId(Date.now().toString()) // 拖拽
this.form.tableData.push(tableRow)
this.disabledAdd = true
this.$emit('save-call-back', true)
} else {
return false;
}
});
},
deleteRow (index, row) {
//1.删除
this.form.tableData.splice(index, 1)
// 2.去重
if(this.form.tableData.length === 0){
this.fieldName = []
}else{
this.fieldName = this.fieldName.filter(item => item !== row[this.tableColumn[0].prop])
}
},
isRepeat (arr) {
return _.uniq(arr).length !== arr.length;
}
}
}
</script>
-end-
1554
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
